/* ============================================================
   Aureza Labs — Design Tokens
   Single source of truth for colour, type, space, motion.
   ============================================================ */

:root {
  /* ---- Brand ramp: Teal (heritage #0E7F72 sits at 600) ---- */
  --teal-50:  #eef7f5;
  --teal-100: #d3ebe6;
  --teal-200: #a7d7cf;
  --teal-300: #71bdb1;
  --teal-400: #3f9f92;
  --teal-500: #1a8a7c;
  --teal-600: #0e7f72;
  --teal-700: #0a655c;
  --teal-800: #084f48;
  --teal-900: #073c37;
  --teal-950: #04231f;

  /* ---- Accent ramp: Ember. Used sparingly for data + emphasis ---- */
  /* Clay — the one warm note. Used for emphasis on data, nothing else. */
  --clay-100: #f7ece5;
  --clay-300: #dfae90;
  --clay-500: #c07d55;
  --clay-600: #a86339;
  --clay-700: #8a4e2c;

  /* ---- Support hues for charts / status ---- */
  --violet-500: #6d5ce0;
  --violet-300: #b3a8f2;
  --rose-500:   #d1495b;
  --rose-300:   #efa3ad;
  --sky-500:    #3a86b5;
  --sky-300:    #9ecbe3;

  /* ---- Neutral ramp: green-shifted greys, never pure grey ---- */
  --ink-950: #0a0f0f;
  --ink-900: #121818;
  --ink-800: #1c2423;
  --ink-700: #28312f;
  --ink-600: #3d4846;
  --ink-500: #57625f;
  --ink-400: #78827f;
  --ink-300: #a2aaa8;
  --ink-200: #cbd1cf;
  --ink-100: #e6e9e8;
  --ink-50:  #f4f6f5;
  --paper:   #fdfdfc;

  /* ---- Semantic (light is the default document theme) ---- */
  --bg:            var(--paper);
  --bg-sunk:       var(--ink-50);
  --bg-raised:     #ffffff;
  --bg-inverse:    var(--ink-950);
  --surface-tint:  var(--teal-50);
  --surface-quiet: #f2f5f4;

  --text:          var(--ink-900);
  --text-soft:     var(--ink-500);
  --text-faint:    #5c716d;
  --text-inverse:  #f4faf8;
  --text-inverse-soft: rgba(244, 250, 248, 0.66);

  --brand:         var(--teal-600);        /* fills, borders, marks */
  --brand-text:    var(--teal-700);        /* brand-coloured TEXT on light grounds */
  --brand-hover:   var(--teal-700);
  --brand-soft:    var(--teal-50);
  --brand-on-dark: #4ecdb9;
  --accent:        var(--clay-500);
  --accent-text:   var(--clay-700);
  --rose-text:     #a82f40;
  --accent-soft:   var(--clay-100);

  --line:          #dfe9e6;
  --line-strong:   #c6d6d2;
  --line-inverse:  rgba(255, 255, 255, 0.12);

  --focus:         var(--teal-500);

  /* ---- Elevation. Layered, tinted — not black blur ---- */
  --shadow-xs: 0 1px 2px rgba(10, 15, 15, .06);
  --shadow-sm: 0 1px 2px rgba(10, 15, 15, .07), 0 3px 8px -3px rgba(10, 15, 15, .09);
  --shadow-md: 0 2px 4px rgba(10, 15, 15, .06), 0 8px 20px -8px rgba(10, 15, 15, .16);
  --shadow-lg: 0 4px 8px rgba(10, 15, 15, .06), 0 18px 36px -14px rgba(10, 15, 15, .22);
  --shadow-xl: 0 8px 16px rgba(10, 15, 15, .07), 0 36px 64px -26px rgba(10, 15, 15, .28);
  --shadow-brand: 0 8px 20px -8px rgba(14, 127, 114, .38);

  /* ---- Radii ---- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-editorial: "Newsreader", ui-serif, Georgia, serif;

  /* Fluid scale — 320px → 1440px viewport */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1rem;
  --t-lg:   clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem);
  --t-xl:   clamp(1.1875rem, 1.09rem + 0.49vw, 1.375rem);
  --t-h4:   clamp(1.2rem, 1.12rem + 0.4vw, 1.375rem);
  --t-h3:   clamp(1.3125rem, 1.16rem + 0.7vw, 1.625rem);
  --t-h2:   clamp(1.625rem, 1.36rem + 1.3vw, 2.3125rem);
  --t-h1:   clamp(1.9375rem, 1.56rem + 1.9vw, 2.9375rem);
  --t-hero: clamp(2.1875rem, 1.62rem + 2.85vw, 3.625rem);

  --lh-tight: 1.06;
  --lh-snug: 1.18;
  --lh-base: 1.62;
  --lh-loose: 1.75;

  --tr-tight: -0.028em;
  --tr-snug: -0.018em;
  --tr-wide: 0.16em;

  /* ---- Space (4px base) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  --section-y: clamp(72px, 8vw, 136px);
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(20px, 4vw, 40px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;

  --z-base: 1;
  --z-sticky: 40;
  --z-nav: 60;
  --z-overlay: 80;
  --z-top: 100;

  color-scheme: light;
}

/* ============================================================
   Dark theme — explicit opt-in and system preference.
   Only semantic tokens are redefined; ramps stay constant.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:           var(--ink-950);
    --bg-sunk:      #040a09;
    --bg-raised:    var(--ink-900);
    --bg-inverse:   var(--ink-50);
    --surface-tint: rgba(14, 127, 114, .10);
    --surface-quiet: #101615;

    --text:         #e8f2ef;
    --text-soft:    #9db0ac;
    --text-faint:   #748b86;
    --text-inverse: var(--ink-950);
    --text-inverse-soft: rgba(6, 13, 12, .68);

    --brand:        #35b5a2;
  --brand-text:   #4ecdb9;
    --brand-hover:  #4ecdb9;
    --brand-soft:   rgba(14, 127, 114, .14);
    --accent:       var(--clay-300);
  --accent-text:  var(--clay-300);
  --rose-text:    var(--rose-300);
    --accent-soft:  rgba(192, 125, 85, .16);

    --line:         rgba(255, 255, 255, .09);
    --line-strong:  rgba(255, 255, 255, .17);
    --line-inverse: rgba(6, 13, 12, .12);

    --focus:        #4ecdb9;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .5);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 24px -10px rgba(0, 0, 0, .7);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 24px 48px -20px rgba(0, 0, 0, .8);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, .4), 0 44px 88px -32px rgba(0, 0, 0, .85);
    --shadow-brand: 0 12px 32px -12px rgba(53, 181, 162, .34);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:           var(--ink-950);
  --bg-sunk:      #040a09;
  --bg-raised:    var(--ink-900);
  --bg-inverse:   var(--ink-50);
  --surface-tint: rgba(14, 127, 114, .10);
  --surface-quiet: #101615;

  --text:         #e8f2ef;
  --text-soft:    #9db0ac;
  --text-faint:   #748b86;
  --text-inverse: var(--ink-950);
  --text-inverse-soft: rgba(6, 13, 12, .68);

  --brand:        #35b5a2;
  --brand-text:   #4ecdb9;
  --brand-hover:  #4ecdb9;
  --brand-soft:   rgba(14, 127, 114, .14);
  --accent:       var(--clay-300);
  --accent-text:  var(--clay-300);
  --rose-text:    var(--rose-300);
  --accent-soft:  rgba(225, 147, 52, .14);

  --line:         rgba(255, 255, 255, .09);
  --line-strong:  rgba(255, 255, 255, .17);
  --line-inverse: rgba(6, 13, 12, .12);

  --focus:        #4ecdb9;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px -2px rgba(0, 0, 0, .5);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 24px -10px rgba(0, 0, 0, .7);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 24px 48px -20px rgba(0, 0, 0, .8);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, .4), 0 44px 88px -32px rgba(0, 0, 0, .85);
  --shadow-brand: 0 12px 32px -12px rgba(53, 181, 162, .34);
}