/* Gekko Photonics — Color System
   Base palette drawn from the gekko mark: indigo + azure.
   Gold is the rare signature highlight — protect it, never spray it.
   All text pairings below target WCAG AA, especially on navy. */

:root{
  /* ---- Brand core ---- */
  --indigo-900:#12143f;   /* deepest indigo */
  --indigo-800:#1b1d5c;
  --indigo-700:#232674;
  --indigo-600:#2b2c82;   /* THE gekko wordmark indigo — primary brand */
  --indigo-500:#3a3ca8;   /* hover / lift */
  --indigo-400:#5c5ec8;
  --indigo-300:#9092e0;
  --indigo-100:#e4e5f7;   /* tint surface */

  --azure-700:#0069a8;
  --azure-600:#0084c8;
  --azure-500:#009fe3;    /* gekko "photonics" azure — secondary brand */
  --azure-400:#3bb6ec;
  --azure-300:#7fd0f4;
  --azure-100:#dcf1fc;    /* tint surface */

  --gold-700:#a9761c;
  --gold-600:#c68f28;
  --gold-500:#d9a441;     /* signature accent — rare, focal only */
  --gold-400:#e6bd6e;
  --gold-200:#f4e2b8;
  --gold-100:#faf1d9;

  /* ---- Surfaces (light theme — "navy" names kept so component rules
     below don't need touching; the scale now runs light-to-lighter) ---- */
  --navy-950:#ffffff;     /* was deepest-dark, now brightest surface */
  --navy-900:#f6f8fb;     /* primary page surface */
  --navy-800:#eef1f6;     /* raised surface */
  --navy-700:#e3e8ef;     /* card / border context */
  --navy-600:#aab4c4;

  /* ---- Steel neutrals (cool, faintly blue) ---- */
  --white:#ffffff;
  --paper:#f6f8fb;        /* app / page background (light) */
  --mist:#eef1f6;         /* subtle fill */
  --steel-100:#e3e8ef;
  --steel-200:#cdd5e0;    /* hairline borders */
  --steel-300:#aab4c4;
  --steel-400:#7e8aa0;    /* disabled / faint text */
  --steel-500:#576078;    /* muted / secondary text */
  --steel-600:#3b4358;
  --steel-700:#252b3b;
  --ink:#0e1324;          /* primary text on light */

  /* ---- Semantic status (from instrument UI) ---- */
  --ok-500:#3f9d54;       /* device ready / pass */
  --ok-100:#e2f2e6;
  --warn-500:#d9a441;     /* shares the gold hue by design */
  --warn-100:#faf1d9;
  --alert-500:#d64530;    /* e-stop red / fault */
  --alert-100:#fbe6e2;

  /* =========================================================
     SEMANTIC ALIASES  — reach for these in components
     ========================================================= */
  --brand-primary:var(--indigo-600);
  --brand-primary-hover:var(--indigo-500);
  --brand-secondary:var(--azure-500);
  --brand-accent:var(--gold-500);

  /* text */
  --text-strong:var(--ink);
  --text-body:var(--steel-700);
  --text-muted:var(--steel-500);
  --text-faint:var(--steel-400);
  --text-on-dark:var(--ink);
  --text-on-dark-muted:var(--steel-500);
  --text-on-brand:#ffffff;
  --text-link:var(--indigo-600);
  --text-link-hover:var(--indigo-500);

  /* surfaces */
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-sunken:var(--mist);
  --surface-tint-indigo:var(--indigo-100);
  --surface-tint-azure:var(--azure-100);
  --surface-dark:var(--navy-900);
  --surface-dark-raised:var(--navy-800);
  --surface-dark-card:var(--navy-700);

  /* lines */
  --border-hairline:var(--steel-200);
  --border-strong:var(--steel-300);
  --border-on-dark:var(--border-hairline);
  --focus-ring:var(--azure-500);
}
/* Gekko Photonics — Typography
   Exo 2 = display voice.  Manrope = workhorse UI/body/data.
   (Aptly = logo wordmark only — never used in material copy.) */

:root{
  --font-display:"Exo 2","Manrope",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Manrope",ui-monospace,"SFMono-Regular",monospace; /* data uses Manrope + tnum */
  --font-stencil:"Exo 2","Manrope",sans-serif; /* rare uppercase/technical accent */

  /* Type scale — editorial-technical, deliberate steps */
  --fs-display:clamp(3rem,6vw,5.25rem);  /* @kind font */ /* hero, Exo 2 */
  --fs-h1:3rem;      /* 48 */
  --fs-h2:2.25rem;   /* 36 */
  --fs-h3:1.625rem;  /* 26 */
  --fs-h4:1.25rem;   /* 20 */
  --fs-lead:1.25rem; /* 20 intro paragraph */
  --fs-body:1rem;    /* 16 */
  --fs-sm:.875rem;   /* 14 */
  --fs-xs:.75rem;    /* 12 label / caption */
  --fs-data-xl:3.5rem; /* proud metric */
  --fs-data-lg:2.25rem;

  --lh-tight:1.04;   /* @kind other */
  --lh-snug:1.18;    /* @kind other */
  --lh-normal:1.5;   /* @kind other */
  --lh-relaxed:1.65; /* @kind other */

  --ls-display:-0.02em; /* @kind other */
  --ls-tight:-0.01em;   /* @kind other */
  --ls-normal:0;        /* @kind other */
  --ls-label:0.08em;    /* @kind other */ /* the rare CAPS eyebrow */
  --ls-wide:0.14em;     /* @kind other */

  /* font weights */
  --fw-xlight:200; /* @kind other */
  --fw-light:300; /* @kind other */
  --fw-regular:400; /* @kind other */
  --fw-medium:500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:700; /* @kind other */
  --fw-xbold:800; /* @kind other */
  --fw-black:900; /* @kind other */

  /* Tabular numerals — measurements are proof, keep them aligned */
  --num-tabular:"tnum" 1,"lnum" 1; /* @kind other */
}
/* Gekko Photonics — Spacing, radius, elevation, motion, layout
   One repeated layout primitive: the technical grid.  Restraint over decoration. */

:root{
  /* Spacing — 4px base */
  --sp-0:0; /* @kind spacing */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
  --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
  --sp-20:80px;--sp-24:96px;--sp-32:128px;

  /* Radius — mixed deliberately, never uniform 16px everywhere.
     Instruments read as precise: mostly small, crisp radii. */
  --r-none:0; /* @kind radius */
  --r-xs:3px;     /* inputs, chips, data cells */
  --r-sm:6px;     /* buttons, tags */
  --r-md:10px;    /* cards */
  --r-lg:16px;    /* feature panels, media */
  --r-pill:999px; /* status dots, rare pill badges */

  /* Elevation — soft, cool-tinted, restrained. No neon glows. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(14,19,36,.06);
  --shadow-sm:0 1px 3px rgba(14,19,36,.08),0 1px 2px rgba(14,19,36,.04);
  --shadow-md:0 4px 12px rgba(14,19,36,.08),0 2px 4px rgba(14,19,36,.05);
  --shadow-lg:0 16px 40px rgba(14,19,36,.12),0 4px 12px rgba(14,19,36,.06);
  --shadow-focus:0 0 0 3px rgba(0,159,227,.35);

  /* Motion — calm, precise. Short, no bounce. */
  --ease-standard:cubic-bezier(.2,0,0,1);   /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* @kind other */
  --dur-fast:120ms;  /* @kind other */
  --dur-base:200ms;  /* @kind other */
  --dur-slow:320ms;  /* @kind other */

  /* Layout */
  --container:1200px;
  --container-wide:1360px;
  --container-text:44rem;
  --grid-gutter:24px;
  --hairline:1px;
}