/* ==========================================================================
   variables.css — Design Tokens
   WerqLabs Design System. White-dominant theme (falkor-inspired) with a
   reusable dark navy scope (.theme-dark) for the hero, CTA band, and footer.
   Palette derived from: logo blue + WERQ LABS.jpeg (navy field, blue arcs,
   gold city-lights) + falkor reference blue (#2563eb).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     BRAND COLOR
     --------------------------------------------------------------------- */
  --color-brand:        #3262ae;   /* primary blue — CTAs, links, accents */
  --color-brand-50:     #f3f6fc;
  --color-brand-100:    #e7ecf7;
  --color-brand-200:    #c9d7ee;
  --color-brand-300:    #99b6e0;
  --color-brand-400:    #628fce;
  --color-brand-600:    #3e71b9;
  --color-brand-700:    #25477f;
  --color-brand-800:    #223d6a;
  --color-brand-900:    #213559;
  --color-brand-950:    #16223b;

  --color-brand-glow:   #4C8DFF;   /* brighter blue for glow on dark hero */

  --color-gold:         #E0A24E;   /* sparing premium accent (city-lights) */
  --color-gold-soft:    #F2C888;

  /* ---------------------------------------------------------------------
     NAVY — dark sections (hero / CTA / footer)
     --------------------------------------------------------------------- */
  --navy-950:  #050A16;
  --navy-900:  #0A1120;
  --navy-850:  #0E1729;
  --navy-800:  #131F36;
  --navy-700:  #1C2C49;
  --navy-600:  #26385A;

  /* ---------------------------------------------------------------------
     NEUTRALS (falkor palette: dark #1e1e1e + grey scale)
     --------------------------------------------------------------------- */
  --color-white:        #ffffff;
  --color-black:        #1e1e1e;
  --color-ink:          #1e1e1e;   /* falkor text-dark */
  --color-ink-soft:     #3a393e;   /* falkor grey-700 */
  --color-muted:        #757575;   /* falkor grey-500 */
  --color-line:         #ababab;   /* falkor grey-300 — visible borders */
  --color-line-soft:    #e3e3e3;
  --color-surface:      #ffffff;   /* cards */
  --color-surface-alt:  #f5f5ff;   /* falkor grey-100 — alt sections */
  --color-surface-sunken: #efefef;
  --color-bg:           #ffffff;   /* page background */

  /* Falkor interaction accents */
  --color-accent-pale:  #9ebfff;   /* falkor primary-blue — hover fills */
  --color-btn-dark:     #3a393e;   /* falkor grey-700 — solid button bg */

  /* ---------------------------------------------------------------------
     SEMANTIC / STATE
     --------------------------------------------------------------------- */
  --color-success:      #16A34A;
  --color-success-bg:   #ECFDF3;
  --color-warning:      #D97706;
  --color-warning-bg:   #FFFAEB;
  --color-error:        #DC2626;
  --color-error-bg:     #FEF3F2;
  --color-info:         var(--color-brand);
  --color-info-bg:      var(--color-brand-50);

  /* Status colors used in the hero "Operations, live" panel */
  --status-cleared:     #37D399;
  --status-resolved:    #4C8DFF;
  --status-recovered:   #E0A24E;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------- */
  /* FK Grotesk — falkor's typeface, self-hosted (see typography.css).
     Medium is a separate family at weight 400, exactly as falkor ships it. */
  --font-sans: "FK Grotesk", Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-display: "FK Grotesk Medium", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular:   400;
  --fw-medium:    400;   /* weight lives in the Medium family file */
  --fw-semibold:  400;
  --fw-bold:      400;
  --fw-extrabold: 400;

  /* Falkor type scale — 60 / 42 / 36 / 26 / 20 / 18 / 16 / 14 / 12 px */
  --fs-xs:    0.875rem;
  --fs-sm:    0.915rem;
  --fs-base:  1rem;
  --fs-md:    clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-lg:    clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --fs-xl:    clamp(1.625rem, 1.4rem + 0.9vw, 2rem);
  --fs-2xl:   clamp(1.875rem, 1.5rem + 1.5vw, 2.625rem);
  --fs-3xl:   clamp(2.25rem, 1.75rem + 2.4vw, 3.75rem);
  --fs-4xl:   clamp(2.625rem, 2rem + 3.2vw, 4.5rem);

  /* In-between sizes used consistently for card copy/titles across division
     stylesheets — promoted here so they track the scale instead of drifting. */
  --fs-card-body:  0.9375rem;  /* between --fs-sm and --fs-base */
  --fs-card-title: var(--fs-base);  /* between --fs-base and --fs-md */

  /* Falkor leading: hero 4.5/3.75 = 1.2 · body 140% */
  --lh-tight:   1.2;
  --lh-snug:    1.25;
  --lh-normal:  1.4;
  --lh-relaxed: 1.55;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;

  --measure: 66ch;

  /* ---------------------------------------------------------------------
     SPACING — 4px base scale
     --------------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* In-between value used consistently for the mwwd two-column text lead-in
     across every division stylesheet — promoted here to stop the drift. */
  --space-lg-plus: 2.4rem; /* between --space-lg and --space-xl */

  /* Falkor section rhythm: 4–5rem */
  --section-y: clamp(3.5rem, 2.75rem + 2.5vw, 5rem);

  /* ---------------------------------------------------------------------
     LAYOUT — falkor: max-w-[89rem] (1424px), px-5 (20px) gutters
     --------------------------------------------------------------------- */
  --container-max:    89rem;
  --container-wide:   92.5rem;
  --container-narrow: 50rem;
  --gutter: 1.25rem;

  /* ---------------------------------------------------------------------
     RADIUS — falkor is sharp: radius 0 everywhere, pills only for dots/tags
     --------------------------------------------------------------------- */
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------------------
     SHADOWS — falkor is flat; only the header carries a soft shadow
     --------------------------------------------------------------------- */
  --shadow-xs:  none;
  --shadow-sm:  0px 2px 9px 0px rgba(0, 0, 0, 0.07);   /* falkor header */
  --shadow-md:  0px 2px 9px 0px rgba(0, 0, 0, 0.07);
  --shadow-lg:  0px 4px 18px 0px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0px 4px 18px 0px rgba(0, 0, 0, 0.10);
  --shadow-brand: none;
  --ring-focus: 0 0 0 3px var(--color-accent-pale);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   450ms;
  --dur-slower: 700ms;

  /* ---------------------------------------------------------------------
     Z-INDEX SCALE
     --------------------------------------------------------------------- */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;

  /* ---------------------------------------------------------------------
     COMPONENT TOKENS
     --------------------------------------------------------------------- */
  --header-height: 84px;   /* falkor: py-6 + 36px logo (min-h-18 → xl:min-h-23) */
  --header-height-scrolled: 68px;
  --focus-width: 3px;
}

/* ==========================================================================
   .theme-dark — navy scope for hero, CTA band, footer.
   Remaps surface/text/line tokens so every nested component adapts
   automatically without per-component overrides.
   ========================================================================== */
.theme-dark {
  --color-ink:            #F4F7FC;
  --color-ink-soft:       #C2CCDC;
  --color-muted:          #8695AC;
  --color-line:           rgba(255, 255, 255, 0.12);
  --color-line-soft:      rgba(255, 255, 255, 0.07);
  --color-surface:        var(--navy-850);
  --color-surface-alt:    var(--navy-900);
  --color-surface-sunken: var(--navy-800);
  --color-bg:             var(--navy-950);
  /* --color-brand:          var(--color-brand-glow); */
  --color-brand-50:       rgba(76, 141, 255, 0.12);
  --color-brand-100:      rgba(76, 141, 255, 0.22);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 20px 48px rgba(0, 0, 0, 0.55);
  --ring-focus: 0 0 0 4px rgba(76, 141, 255, 0.35);

  color: var(--color-ink);
  background-color: var(--color-bg);
}