/* ==========================================================================
   LScale — Design tokens
   Single source of truth for color, type, space, motion.
   Every value below is referenced by name in main.css. Change it here once
   and it propagates across every section and any future AI-employee page.
   ========================================================================== */

:root {
  /* --- Base surfaces --------------------------------------------------- */
  --ink:            #0A0C10;  /* near-black cinematic stage */
  --ink-raised:     #12161D;  /* cards on the dark stage */
  --ink-line:       #1E242E;  /* hairlines on dark */
  --ink-soft:       #2A323F;  /* dark-stage borders, inactive nodes */

  --paper:          #F5F6F8;  /* light body */
  --paper-raised:   #FFFFFF;  /* cards on light */
  --paper-sunken:   #ECEEF2;  /* wells, table headers, inset panels */
  --paper-line:     #E1E4EA;  /* hairlines on light */

  /* --- Text ------------------------------------------------------------ */
  --text-on-ink:        #F2F4F7;
  --text-on-ink-muted:  #98A2B3;
  --text-on-ink-faint:  #7E8899;   /* AA on --ink and --ink-raised */

  --text:               #0F1319;
  --text-muted:         #5A6472;
  /* faint still reads quieter than muted, but clears WCAG AA (≥4.5) for the
     small mono utility face it is used on */
  --text-faint:         #67707E;

  /* --- Call-state accents ---------------------------------------------
     These are semantic, not decorative. Each maps to one state a real call
     can be in. Do not introduce a new accent without a new state to name.  */
  --signal:         #4A8CFF;  /* live · incoming · in progress   */
  --signal-tint:    #8FB8FF;  /* signal on dark backgrounds      */
  --signal-wash:    #EDF3FF;  /* signal fill on light            */
  --signal-text:    #2563D0;  /* signal as TEXT on light — AA    */

  --booked:         #2FBF87;  /* confirmed · booked · synced     */
  --booked-tint:    #6FDCB2;
  --booked-wash:    #E9F8F2;
  --booked-text:    #106A4A;  /* booked as TEXT on light — AA    */

  --escalate:       #E0A03C;  /* needs attention · escalated     */
  --escalate-tint:  #F0C482;
  --escalate-wash:  #FDF4E6;
  --escalate-text:  #8A5A0F;  /* escalate as TEXT on light — AA  */

  --missed:         #E5484D;  /* missed · lost                   */
  --missed-wash:    #FDEDED;

  /* --- Type roles ------------------------------------------------------
     Display and body share a family; they are separated by weight, tracking
     and optical size. The utility face is monospace and is reserved for
     operational data: timestamps, durations, IDs, phone numbers, codes.
     To swap in a licensed face for production, replace --font-display and
     --font-body only — nothing else in the system references a family.     */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
                  Menlo, Consolas, "Liberation Mono", monospace;

  /* Fluid display scale — clamps keep headlines controlled, never compressed */
  --t-display-1: clamp(2.6rem, 1.5rem + 4.1vw, 4.6rem);
  --t-display-2: clamp(2.1rem,  1.25rem + 3.2vw, 3.5rem);
  --t-display-3: clamp(1.65rem, 1.15rem + 1.9vw, 2.4rem);
  --t-heading:   clamp(1.2rem,  1.05rem + 0.6vw, 1.5rem);
  --t-body-lg:   clamp(1.05rem, 0.99rem + 0.28vw, 1.25rem);
  --t-body:      1rem;
  --t-small:     0.9375rem;
  --t-caption:   0.8125rem;
  --t-data:      0.75rem;   /* mono utility */

  --lh-display: 1.02;
  --lh-heading: 1.18;
  --lh-body:    1.62;

  --tr-display: -0.033em;   /* tight, but never novelty-compressed */
  --tr-heading: -0.018em;
  --tr-body:    -0.002em;
  --tr-data:     0.09em;    /* mono caps need air */

  /* --- Space ----------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3.5rem;
  --s-9: 5rem;     --s-10: 7rem;    --s-11: 9.5rem;

  --section-y: clamp(4.5rem, 2.5rem + 7vw, 8.5rem);
  --gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  --maxw:      1200px;
  --maxw-text: 62ch;

  /* --- Radius & elevation ---------------------------------------------
     Restrained. Shadows describe height above the page, nothing more.      */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(13, 18, 28, 0.05);
  --shadow-2: 0 2px 4px rgba(13, 18, 28, 0.04), 0 8px 20px rgba(13, 18, 28, 0.06);
  --shadow-3: 0 4px 8px rgba(13, 18, 28, 0.05), 0 20px 44px rgba(13, 18, 28, 0.09);
  --shadow-ink: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* --- Motion ----------------------------------------------------------
     Calm and controlled. Nothing bounces, nothing overshoots.              */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   160ms;
  --d-base:   280ms;
  --d-slow:   520ms;
  --d-stage:  760ms;

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal);
  --focus-ring-ink: 0 0 0 2px var(--ink), 0 0 0 4px var(--signal-tint);
}

/* Reduced motion: the page must still explain itself with zero animation.
   Sections resolve to their final state; the hero stops scrubbing. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-stage: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}