/* ==========================================================================
   TTEO Design Tokens — "Electric Cobalt"
   --------------------------------------------------------------------------
   VENDORED COPY — do not edit here. Source of truth: /design/tokens.css.
   Served from the /static mount; keep in sync with the canonical
   design/tokens.css (and design/STYLE_GUIDE.md) whenever tokens change.
   --------------------------------------------------------------------------
   Reference the custom properties below instead of hardcoding values:

       <link rel="stylesheet" href="/static/design/tokens.css">
       .btn { background: var(--color-primary); color: var(--color-on-primary); }

   Theme: light primary · bold & playful · minimal motion.
   See STYLE_GUIDE.md for usage rules and rationale.
   ========================================================================== */

:root {
  /* --- Brand palette ----------------------------------------------------- */
  /* Primary: cobalt blue. The single colour for primary actions & links.    */
  --color-primary-50:  #EFF6FF;  /* tint: hover surfaces, selected rows      */
  --color-primary-100: #DBEAFE;  /* tint: badges, focus halo                 */
  --color-primary:     #2563EB;  /* DEFAULT — buttons, links, active state   */
  --color-primary-700: #1D4ED8;  /* hover / pressed                          */
  --color-on-primary:  #FFFFFF;  /* text/icons on a primary fill             */

  /* Pop accent: lime. Decorative highlights & badge FILLS only.             */
  /* NOTE: lime fails contrast as text on white — never use it for text on   */
  /* a light surface. Use lime as a background with --color-ink text.        */
  --color-accent-100:  #ECFCCB;  /* tint: badge background                   */
  --color-accent:      #84CC16;  /* DEFAULT — highlights, accent fills       */
  --color-accent-700:  #65A30D;  /* darker accent for small text-on-tint     */

  /* --- Neutrals ---------------------------------------------------------- */
  --color-bg:        #FFFFFF;    /* page background (crisp white)            */
  --color-surface:   #F7F8FA;    /* cards, panels (cool grey)               */
  --color-surface-2: #EEF1F5;    /* nested / sunken surfaces                */
  --color-border:    #E2E8F0;    /* hairlines, dividers, input borders      */
  --color-ink:       #0F172A;    /* headings & body text (slate)            */
  --color-muted:     #64748B;    /* secondary / supporting text             */

  /* --- Semantic (muted, never decorative) -------------------------------- */
  --color-success:      #16A34A; --color-success-tint: #DCFCE7;
  --color-warning:      #CA8A04; --color-warning-tint: #FEF9C3;
  --color-danger:       #DC2626; --color-danger-tint:  #FEE2E2;
  --color-on-danger:    #FFFFFF; /* text on a solid danger fill             */

  /* --- Typography -------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-display: 800;

  /* Type scale (16px base) */
  --text-display: 2.5rem;   /* 40px — hero / page titles                    */
  --text-h1:      2rem;     /* 32px                                         */
  --text-h2:      1.5rem;   /* 24px                                         */
  --text-h3:      1.25rem;  /* 20px                                         */
  --text-body-lg: 1.125rem; /* 18px — lead paragraphs                       */
  --text-body:    1rem;     /* 16px — default                               */
  --text-small:   0.875rem; /* 14px                                         */
  --text-caption: 0.75rem;  /* 12px — labels, eyebrow text                  */

  /* Line heights */
  --leading-tight: 1.15;    /* display / headings                           */
  --leading-snug:  1.3;     /* sub-headings                                 */
  --leading-normal: 1.6;    /* body copy                                    */

  /* --- Spacing scale (4px base) ------------------------------------------ */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1100px;
  --container-pad: var(--space-5);

  /* --- Shape & elevation ------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;   /* DEFAULT — cards & buttons                        */
  --radius-lg:   14px;
  --radius-pill: 999px;  /* status badges / chips                           */

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);  /* DEFAULT card           */
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10); /* popovers / modals      */

  /* Focus ring — accessible keyboard focus for all interactive elements    */
  --focus-ring: 0 0 0 3px var(--color-primary-100);

  /* --- Motion (minimal) -------------------------------------------------- */
  /* Only essential transitions: colour/background/box-shadow on interactive */
  /* elements. No transforms, lifts, tilts, or entrance animations.          */
  --motion-fast: 120ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --transition-interactive:
    background-color var(--motion-fast) var(--ease-standard),
    border-color     var(--motion-fast) var(--ease-standard),
    color            var(--motion-fast) var(--ease-standard),
    box-shadow       var(--motion-fast) var(--ease-standard);
}

/* Respect users who prefer reduced motion — drop all transitions. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition-interactive: none; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}