/* COLOUR

   The brand ramp is the ONLY custom colour in Droneportal's Tailwind theme. Everything else in the
   product is raw Tailwind `neutral-*` plus four status hues. Values below are verbatim from the
   product's tailwind config and components.

   ⚠️ Droneportal's app/globals.css also defines a --bg-* / --text-* / --brand-* token layer. In the
   product that layer is DEAD — its only live consumers are two webkit-scrollbar rules. The palette
   below was read off the components, which is where the real values live. Do not assume the
   product consumes semantic tokens; it does not (yet). */
:root{
  /* Brand ramp — the accent. brand-500 is the brand blue (121 uses in the product). */
  --brand-50:#f0f7ff;
  --brand-100:#e0effe;
  --brand-200:#baddfd;
  --brand-300:#7dc4fb;
  --brand-400:#38a6f7;
  --brand-500:#0e8de8;
  --brand-600:#0270cc;
  --brand-700:#0259a5;
  --brand-800:#064b88;
  --brand-900:#0b3f71;
  --brand-950:#072847;

  /* Neutrals — Tailwind `neutral`, NOT `gray`. The product is consistent about this. */
  --neutral-50:#fafafa;
  --neutral-100:#f5f5f5;
  --neutral-200:#e5e5e5;
  --neutral-300:#d4d4d4;
  --neutral-400:#a3a3a3;
  --neutral-500:#737373;
  --neutral-600:#525252;
  --neutral-700:#404040;
  --neutral-800:#262626;
  --neutral-900:#171717;
  --neutral-950:#0a0a0a;

  /* Status hues — raw Tailwind, one formula: bg-{hue}-100 text-{hue}-700 / dark bg-950 text-400 */
  --emerald-100:#d1fae5;--emerald-400:#34d399;--emerald-700:#047857;--emerald-950:#022c22;
  --amber-100:#fef3c7;--amber-400:#fbbf24;--amber-700:#b45309;--amber-950:#451a03;
  --red-100:#fee2e2;--red-400:#f87171;--red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;--red-950:#450a0a;
  --blue-100:#dbeafe;--blue-400:#60a5fa;--blue-500:#3b82f6;--blue-700:#1d4ed8;--blue-950:#172554;

  /* Brand ink + paper — the website side, sampled from the logo */
  --dp-ink:#0D141A;
  --dp-paper:#FFFFFF;
}

/* SEMANTIC — light. Put nothing here that the components don't actually do. */
:root{
  --surface-page:#FFFFFF;
  --surface-sunken:var(--neutral-50);
  --surface-card:#FFFFFF;
  --surface-overlay:#FFFFFF;              /* 2D map chrome is OPAQUE white */
  --surface-active:var(--brand-50);        /* active / selected recipe */
  --surface-hover:var(--neutral-100);      /* idle / interactive hover */

  --border-subtle:var(--neutral-200);      /* page-level surfaces */
  --border-floating:var(--neutral-200);    /* floating chrome — same in light, splits in dark */

  /* Text ladder — four rungs, exactly as the product uses them */
  --text-heading:var(--neutral-900);
  --text-secondary:var(--neutral-500);
  --text-hint:var(--neutral-400);
  --text-ghosted:var(--neutral-300);
  --text-on-brand:#FFFFFF;

  --brand-primary:var(--brand-500);
  --brand-primary-hover:var(--brand-600);
  --brand-primary-active:var(--brand-700);
  --brand-text:var(--brand-600);           /* active-row text */
  --brand-focus:var(--brand-500);

  /* Website aliases (Manrope surfaces) */
  --text-body:#22303B;
  --text-muted:var(--neutral-500);
  --text-faint:var(--neutral-400);
  --text-inverse:#FFFFFF;
  --text-link:var(--brand-600);
  --text-link-hover:var(--brand-700);
  --border-hairline:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --surface-inverse:var(--dp-ink);
  --surface-accent:var(--brand-600);
  --text-on-accent:#FFFFFF;
  --intent-primary:var(--brand-500);
  --intent-primary-hover:var(--brand-600);
  --intent-primary-active:var(--brand-700);
  --intent-success:var(--emerald-700);
  --intent-warning:var(--amber-700);
  --intent-danger:var(--red-600);
  --chrome-button:var(--neutral-100);
  --chrome-button-hover:var(--neutral-200);
  --chrome-button-active:var(--neutral-300);
  --chrome-button-fg:var(--neutral-800);
}

/* SEMANTIC — dark. The class goes on <html>, driven by next-themes, persisted at localStorage
   key "theme" with values light | dark | system. prefers-color-scheme IS respected. */
.dark{
  color:var(--text-heading);
  --surface-page:var(--neutral-950);
  --surface-sunken:var(--neutral-950);
  --surface-card:var(--neutral-900);
  --surface-overlay:var(--neutral-900);
  --surface-active:rgb(7 40 71 / .5);      /* dark:bg-brand-950/50 */
  --surface-hover:var(--neutral-800);

  --border-subtle:var(--neutral-800);      /* page-level surfaces */
  --border-floating:var(--neutral-700);    /* ⚠️ floating chrome is ONE STEP LIGHTER — preserve */

  --text-heading:#FFFFFF;                  /* literal white, never neutral-50 */
  --text-secondary:var(--neutral-400);
  --text-hint:var(--neutral-600);          /* ⚠️ dark mode goes DARKER here, by design */
  --text-ghosted:var(--neutral-700);
  --text-on-brand:#FFFFFF;

  --brand-primary:var(--brand-500);
  --brand-primary-hover:var(--brand-600);
  --brand-primary-active:var(--brand-700);
  --brand-text:var(--brand-400);           /* the one deliberate light/dark shift: 500 → 400 */
  --brand-focus:var(--brand-400);

  --text-body:var(--neutral-300);
  --text-muted:var(--neutral-400);
  --text-faint:var(--neutral-600);
  --text-inverse:var(--neutral-950);
  --text-link:var(--brand-400);
  --text-link-hover:var(--brand-300);
  --border-hairline:var(--neutral-800);
  --border-strong:var(--neutral-700);
  --surface-inverse:var(--neutral-50);
  --surface-accent:var(--brand-500);
  --intent-success:var(--emerald-400);
  --intent-warning:var(--amber-400);
  --intent-danger:var(--red-400);
  --chrome-button:var(--neutral-800);
  --chrome-button-hover:var(--neutral-700);
  --chrome-button-fg:var(--neutral-100);
}

/* 3D viewer chrome is DARK-ONLY BY CONSTRUCTION — the canvas behind it is always dark.
   Do not "add light mode" here without first deciding what the canvas looks like. */
:root,.dark{
  --viewer-chrome-bg:rgb(23 23 23 / .9);   /* bg-neutral-900/90 + backdrop-blur */
  --viewer-chrome-border:var(--neutral-700);
  --viewer-chrome-fg:rgb(255 255 255 / .9);
}