/* ============================================================================
   Montivory — tokens.css
   Three-layer token architecture:

     Layer 1  --ds-*     Upstream design-system primitives (MTVR AI Stylesheet
                         / DesignBridge). Raw values live here and NOWHERE else.
     Layer 2  --color-*, --space-*, --font-*, --radius-*, --shadow-*, --z-*,
              --duration-*, --ease-*
                         Project aliases. Each references a Layer-1 token with a
                         hard-coded fallback:  var(--ds-x, <fallback>).
     Layer 3  components Reference ONLY Layer-2 aliases — never Layer 1, never
                         a raw value.

   This file is self-contained (Layer 1 + Layer 2). Import it from styles.css.
   ============================================================================ */

/* ==========================================================================
   LAYER 1 — Upstream design-system primitives (--ds-*)
   Exact MTVR / DesignBridge values. The only place raw values are allowed.
   ========================================================================== */
:root {
  /* --- Palette: Navy (brand anchor) --- */
  --ds-navy-100: #182b45; --ds-navy-80: #46556a; --ds-navy-60: #74808f;
  --ds-navy-40:  #a3aab5; --ds-navy-20: #d1d5da;
  /* --- Palette: Mont Blue (interactive) --- */
  --ds-blue-100: #0064f0; --ds-blue-80: #3383f3; --ds-blue-60: #66a2f6;
  --ds-blue-40:  #99c1f9; --ds-blue-20: #cce0fc; --ds-blue-press: #004db9;
  /* --- Palette: neutrals --- */
  --ds-black-100: #1a1a1a; --ds-black-80: #333333; --ds-black-60: #666666;
  --ds-black-40:  #999999; --ds-black-20: #cccccc;
  --ds-white: #ffffff; --ds-ivory: #f2f2f2; --ds-soft-blue: #faf8ff;
  --ds-placeholder: #a5a7aa;
  /* --- Palette: status --- */
  --ds-positive: #1dda88; --ds-positive-text: #20854a; --ds-positive-fill: #ccfae4;
  --ds-warning:  #f9b800; --ds-warning-text:  #b5762d; --ds-warning-fill:  #fcf4cc;
  --ds-negative: #f55037; --ds-negative-text: #f55037; --ds-negative-fill: #fddcd7;
  /* --- Palette: channel triplets (for rgba composition) --- */
  --ds-navy-rgb: 24, 43, 69; /* @kind color */
  --ds-blue-rgb: 0, 100, 240; /* @kind color */

  /* --- Spacing scale (4px base) --- */
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 12px; --ds-space-4: 16px;
  --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px;
  --ds-space-12: 48px; --ds-space-16: 64px; --ds-space-20: 80px;

  /* --- Typography --- */
  --ds-font-sans:  'Geist', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ds-font-mono:  'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --ds-size-xs: 0.75rem; --ds-size-sm: 0.875rem; --ds-size-base: 1rem; --ds-size-lg: 1.125rem;
  --ds-size-xl: 1.25rem; --ds-size-2xl: 1.5rem; --ds-size-3xl: 2rem; --ds-size-4xl: 2.5rem; --ds-size-5xl: 3rem;
  --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700;
  --ds-leading-tight: 1.2; --ds-leading-snug: 1.35; --ds-leading-normal: 1.5;

  /* --- Radius --- */
  --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 28px; --ds-radius-pill: 100px;

  /* --- Elevation --- */
  --ds-shadow-sm: 0px 2px 4px -2px rgba(var(--ds-navy-rgb), 0.06), 0px 4px 8px -2px rgba(var(--ds-navy-rgb), 0.10);
  --ds-shadow-md: 0px 4px 6px -2px rgba(var(--ds-navy-rgb), 0.03), 0px 12px 16px -4px rgba(var(--ds-navy-rgb), 0.08);
  --ds-shadow-lg: 0px 8px 8px -4px rgba(var(--ds-navy-rgb), 0.03), 0px 20px 24px -4px rgba(var(--ds-navy-rgb), 0.08);
  --ds-shadow-xl: 0px 32px 64px -12px rgba(var(--ds-navy-rgb), 0.14);

  /* --- Motion --- */
  --ds-duration-fast: 140ms; /* @kind other */ --ds-duration-medium: 240ms; /* @kind other */ --ds-duration-slow: 420ms; /* @kind other */
  --ds-ease-standard: cubic-bezier(0.24, 1, 0.4, 1); /* @kind other */
  --ds-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ds-ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  /* --- Z-index --- */
  --ds-z-base: 0; /* @kind other */ --ds-z-sticky: 100; /* @kind other */ --ds-z-dropdown: 1000; /* @kind other */ --ds-z-popover: 1050; /* @kind other */ --ds-z-overlay: 1100; /* @kind other */
  --ds-z-modal: 1200; /* @kind other */ --ds-z-toast: 1300; /* @kind other */ --ds-z-tooltip: 1400; /* @kind other */
}

/* ==========================================================================
   LAYER 2 — Project aliases
   Each references a Layer-1 token WITH a raw fallback, so the file still
   resolves if the upstream layer is swapped out or absent.
   Layer-3 components reference only these names.
   ========================================================================== */
:root {
  /* --- Colour: text --- */
  --color-text:            var(--ds-black-100, #1a1a1a);
  --color-text-secondary:  var(--ds-black-60, #666666);
  --color-text-disabled:   var(--ds-black-40, #999999);
  --color-text-placeholder: var(--ds-placeholder, #a5a7aa);
  --color-text-on-accent:  var(--ds-white, #ffffff);

  /* --- Colour: background --- */
  --color-bg:         var(--ds-ivory, #f2f2f2);
  --color-bg-surface: var(--ds-white, #ffffff);
  --color-bg-muted:   var(--ds-soft-blue, #faf8ff);
  --color-bg-inverted: var(--ds-navy-100, #182b45);

  /* --- Colour: link --- */
  --color-link:         var(--ds-blue-100, #0064f0);
  --color-link-hover:   var(--ds-blue-80, #3383f3);
  --color-link-visited: var(--ds-blue-press, #004db9);

  /* --- Colour: border --- */
  --color-border:          var(--ds-black-20, #cccccc);
  --color-border-emphasized: var(--ds-navy-40, #a3aab5);
  --color-border-strong:   var(--ds-navy-60, #74808f);

  /* --- Colour: interactive states (accent / CTA) --- */
  --color-interactive:          var(--ds-blue-100, #0064f0);
  --color-interactive-hover:    var(--ds-blue-80, #3383f3);
  --color-interactive-active:   var(--ds-blue-press, #004db9);
  --color-interactive-disabled: var(--ds-blue-40, #99c1f9);
  --color-interactive-subtle:   var(--ds-blue-20, #cce0fc);
  --color-focus-ring:           var(--ds-blue-100, #0064f0);

  /* --- Colour: status --- */
  --color-success: var(--ds-positive-text, #20854a); --color-success-bg: var(--ds-positive-fill, #ccfae4);
  --color-warning: var(--ds-warning-text, #b5762d);  --color-warning-bg: var(--ds-warning-fill, #fcf4cc);
  --color-danger:  var(--ds-negative-text, #f55037); --color-danger-bg:  var(--ds-negative-fill, #fddcd7);

  /* --- Spacing (8 steps) --- */
  --space-1:  var(--ds-space-1, 4px);
  --space-2:  var(--ds-space-2, 8px);
  --space-3:  var(--ds-space-3, 12px);
  --space-4:  var(--ds-space-4, 16px);
  --space-5:  var(--ds-space-6, 24px);
  --space-6:  var(--ds-space-8, 32px);
  --space-7:  var(--ds-space-10, 40px);
  --space-8:  var(--ds-space-12, 48px);

  /* --- Typography --- */
  --font-body:    var(--ds-font-sans, sans-serif);
  --font-heading: var(--ds-font-sans, sans-serif);
  --font-mono:    var(--ds-font-mono, monospace);
  --font-size-xs:   var(--ds-size-xs, 0.75rem);
  --font-size-sm:   var(--ds-size-sm, 0.875rem);
  --font-size-base: var(--ds-size-base, 1rem);
  --font-size-lg:   var(--ds-size-lg, 1.125rem);
  --font-size-xl:   var(--ds-size-xl, 1.25rem);
  --font-size-2xl:  var(--ds-size-2xl, 1.5rem);
  --font-size-3xl:  var(--ds-size-3xl, 2rem);
  --font-size-4xl:  var(--ds-size-4xl, 2.5rem);
  --font-size-5xl:  var(--ds-size-5xl, 3rem);
  --font-weight-regular:  var(--ds-weight-regular, 400);
  --font-weight-medium:   var(--ds-weight-medium, 500);
  --font-weight-semibold: var(--ds-weight-semibold, 600);
  --font-weight-bold:     var(--ds-weight-bold, 700);
  --line-height-tight:  var(--ds-leading-tight, 1.2);
  --line-height-snug:   var(--ds-leading-snug, 1.35);
  --line-height-normal: var(--ds-leading-normal, 1.5);

  /* --- Border radius --- */
  --radius-sm:   var(--ds-radius-sm, 6px);
  --radius-md:   var(--ds-radius-md, 10px);
  --radius-lg:   var(--ds-radius-lg, 14px);
  --radius-xl:   var(--ds-radius-xl, 28px);
  --radius-pill: var(--ds-radius-pill, 100px);

  /* --- Elevation / shadow --- */
  --shadow-sm: var(--ds-shadow-sm, 0px 2px 4px -2px rgba(24,43,69,0.10));
  --shadow-md: var(--ds-shadow-md, 0px 12px 16px -4px rgba(24,43,69,0.08));
  --shadow-lg: var(--ds-shadow-lg, 0px 20px 24px -4px rgba(24,43,69,0.08));
  --shadow-xl: var(--ds-shadow-xl, 0px 32px 64px -12px rgba(24,43,69,0.14));
  --shadow-focus: 0 0 0 3px rgba(var(--ds-blue-rgb, 0,100,240), 0.28);

  /* --- Z-index --- */
  --z-base:     var(--ds-z-base, 0);
  --z-sticky:   var(--ds-z-sticky, 100);
  --z-dropdown: var(--ds-z-dropdown, 1000);
  --z-popover:  var(--ds-z-popover, 1050);
  --z-overlay:  var(--ds-z-overlay, 1100);
  --z-modal:    var(--ds-z-modal, 1200);
  --z-toast:    var(--ds-z-toast, 1300);
  --z-tooltip:  var(--ds-z-tooltip, 1400);

  /* --- Motion / transitions --- */
  --duration-fast:   var(--ds-duration-fast, 140ms);
  --duration-medium: var(--ds-duration-medium, 240ms);
  --duration-slow:   var(--ds-duration-slow, 420ms);
  --ease-standard: var(--ds-ease-standard, cubic-bezier(0.24, 1, 0.4, 1));
  --ease-in-out:   var(--ds-ease-in-out, cubic-bezier(0.65, 0, 0.35, 1));
  --ease-out:      var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --transition-colors: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}