/* ==========================================================================
   Cloud On — Design Tokens
   tokens.css · v1.0
   --------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for all colour, type, spacing, radius, elevation
   and motion values. Generated from the frozen Design System v1.0.

   RULES (Engineering Blueprint §2, §7):
     • Consume these variables — never hardcode a colour/space/radius/motion.
     • This file declares tokens ONLY. No selectors, no component styling,
       no visual change. It must be safe to load with zero side effects.
     • Load FIRST, before any consuming stylesheet.
     • Do not edit values here to "tweak" a screen — tokens are frozen;
       changing one changes the whole product by design.

   THEMES: light is the default (:root). Dark is applied via the OS
   preference (prefers-color-scheme) and can be forced either way by the
   [data-theme] attribute on the root element (attribute wins in both
   directions). Only SEMANTIC tokens (surface/text/border/elevation) flip
   between themes — primitives and scales stay constant.
   ========================================================================== */

:root {

  /* --- Primitives · Blue ramp (brand) ------------------------------------ */
  --blue-50:  #e6f4fd;
  --blue-100: #bfe4fa;
  --blue-200: #8ed2f6;
  --blue-300: #52bbf0;
  --blue-400: #1fa8ea;
  --blue-500: #0097e4;   /* brand base */
  --blue-600: #007cc1;
  --blue-700: #00609a;
  --blue-800: #004a78;
  --blue-900: #003253;

  /* --- Primitives · Teal ramp (secondary) -------------------------------- */
  --teal-50:  #e0f7f4;
  --teal-100: #b3ece6;
  --teal-300: #4fd6c7;
  --teal-500: #0fb5a1;
  --teal-700: #0b8577;

  /* --- Primitives · Slate ramp (neutrals) -------------------------------- */
  --slate-0:   #ffffff;
  --slate-50:  #f5f8fc;
  --slate-100: #e9eff6;
  --slate-200: #d5deec;
  --slate-300: #b2c1d7;
  --slate-400: #8698b5;
  --slate-500: #5f7291;
  --slate-600: #445674;
  --slate-700: #2f3f59;
  --slate-800: #1c2841;
  --slate-900: #0e1626;

  /* --- Semantic · Brand aliases ------------------------------------------ */
  --brand:          var(--blue-500);
  --brand-hover:    var(--blue-600);
  --brand-active:   var(--blue-700);
  --brand-subtle:   var(--blue-50);
  --secondary:      var(--teal-500);
  --secondary-hover:var(--teal-700);
  --on-brand:       #ffffff;   /* text/icon on a brand-filled surface */

  /* --- Semantic · Status ------------------------------------------------- */
  --success: #1f9d57;
  --warning: #e0a020;
  --danger:  #d92d3a;
  --info:    #0097e4;

  /* --- Semantic · Surfaces / Text / Borders (LIGHT) ---------------------- */
  --bg:        #f4f7fc;   /* page background            */
  --surface:   #ffffff;   /* cards, panels              */
  --surface-2: #eef3f9;   /* subtle raised / table head */
  --surface-3: #e3ebf5;   /* pressed / deeper fill      */
  --text:      #132033;   /* primary text               */
  --text-2:    #41506a;   /* secondary text             */
  --text-3:    #6b7c96;   /* muted / captions           */
  --border:    #dae2ee;   /* default hairline           */
  --border-2:  #c6d2e3;   /* stronger divider / input   */

  /* --- Typography · Families --------------------------------------------- */
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* --- Typography · Type scale ------------------------------------------- */
  --fs-display: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  --fs-h1:      2.125rem;   /* 34px */
  --fs-h2:      1.6875rem;  /* 27px */
  --fs-h3:      1.375rem;   /* 22px */
  --fs-h4:      1.125rem;   /* 18px */
  --fs-body:    0.9375rem;  /* 15px */
  --fs-sm:      0.84rem;    /* ~13.5px */
  --fs-cap:     0.75rem;    /* 12px */

  /* --- Typography · Weights & line-heights ------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --lh-tight:    1.15;   /* display / large headings */
  --lh-heading:  1.3;    /* headings                 */
  --lh-body:     1.6;    /* running text             */

  /* --- Spacing scale (4 / 8 base) ---------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Radius ------------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* --- Elevation (LIGHT) ------------------------------------------------- */
  --elev-1: 0 1px 2px rgba(19,32,56,.06);
  --elev-2: 0 2px 6px rgba(19,32,56,.07), 0 1px 2px rgba(19,32,56,.05);
  --elev-3: 0 10px 24px rgba(19,32,56,.10), 0 3px 6px rgba(19,32,56,.06);
  --elev-4: 0 22px 48px rgba(19,32,56,.16), 0 6px 12px rgba(19,32,56,.08);

  /* --- Motion · Durations ------------------------------------------------ */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
  --dur-slower: 420ms;

  /* --- Motion · Easings -------------------------------------------------- */
  --ease-standard:   cubic-bezier(.4, 0, .2, 1);
  --ease-out:        cubic-bezier(0, 0, .2, 1);
  --ease-in:         cubic-bezier(.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --ease-spring:     cubic-bezier(.34, 1.56, .64, 1);

  /* --- Technical layer ---------------------------------------------------
     Not visual design values — infrastructure the Component Library
     provably requires (stacking order for overlay components; a single
     accessible focus ring). Flagged per Blueprint §1 as a real gap-fill,
     not a new Design System rule. */
  --z-base:     1;
  --z-sticky:   100;   /* sticky header            */
  --z-dropdown: 1000;  /* menus, popovers          */
  --z-overlay:  1040;  /* modal backdrop           */
  --z-modal:    1050;  /* modal dialog             */
  --z-tooltip:  1070;  /* tooltips                 */
  --z-toast:    1080;  /* toasts (top of stack)    */

  --focus-ring:        0 0 0 3px rgba(0,151,228,.45);
  --focus-ring-offset: 2px;
}

/* ==========================================================================
   DARK THEME
   Semantic tokens only. OS preference first, then explicit [data-theme]
   overrides win in both directions (see the two attribute blocks below).
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0c121e;
    --surface:   #141c2b;
    --surface-2: #1b2536;
    --surface-3: #243149;
    --text:      #e8eef7;
    --text-2:    #aab7cd;
    --text-3:    #8291a9;
    --border:    #26324a;
    --border-2:  #33425f;

    --brand-subtle: #0f2434;

    --elev-1: 0 1px 2px rgba(0,0,0,.40);
    --elev-2: 0 2px 8px rgba(0,0,0,.45);
    --elev-3: 0 12px 28px rgba(0,0,0,.50);
    --elev-4: 0 24px 52px rgba(0,0,0,.60);

    --focus-ring: 0 0 0 3px rgba(82,187,240,.55);
  }
}

/* Explicit override → DARK (wins over the light default) */
:root[data-theme="dark"] {
  --bg:        #0c121e;
  --surface:   #141c2b;
  --surface-2: #1b2536;
  --surface-3: #243149;
  --text:      #e8eef7;
  --text-2:    #aab7cd;
  --text-3:    #8291a9;
  --border:    #26324a;
  --border-2:  #33425f;

  --brand-subtle: #0f2434;

  --elev-1: 0 1px 2px rgba(0,0,0,.40);
  --elev-2: 0 2px 8px rgba(0,0,0,.45);
  --elev-3: 0 12px 28px rgba(0,0,0,.50);
  --elev-4: 0 24px 52px rgba(0,0,0,.60);

  --focus-ring: 0 0 0 3px rgba(82,187,240,.55);
}

/* Explicit override → LIGHT (wins over the OS-dark media query) */
:root[data-theme="light"] {
  --bg:        #f4f7fc;
  --surface:   #ffffff;
  --surface-2: #eef3f9;
  --surface-3: #e3ebf5;
  --text:      #132033;
  --text-2:    #41506a;
  --text-3:    #6b7c96;
  --border:    #dae2ee;
  --border-2:  #c6d2e3;

  --brand-subtle: var(--blue-50);

  --elev-1: 0 1px 2px rgba(19,32,56,.06);
  --elev-2: 0 2px 6px rgba(19,32,56,.07), 0 1px 2px rgba(19,32,56,.05);
  --elev-3: 0 10px 24px rgba(19,32,56,.10), 0 3px 6px rgba(19,32,56,.06);
  --elev-4: 0 22px 48px rgba(19,32,56,.16), 0 6px 12px rgba(19,32,56,.08);

  --focus-ring: 0 0 0 3px rgba(0,151,228,.45);
}

/* ==========================================================================
   Accessibility · honour reduced-motion at the token level so every
   consumer inherits it for free (Blueprint §1 — accessibility-first).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
  }
}