/* =============================================================
   PetVaccineCard · Token Core
   Fluent 2 alias tokens, brand- and mode-agnostic.
   Brand ramp variables (--brand-10 ... --brand-160) are supplied
   by a brand file (e.g. brand-petvax.css). Mode is selected with
   data-theme="light" | "dark" on the root.
   ============================================================= */

/* ---------- 1. SHAPE · SPACING · TYPE · MOTION (mode-agnostic) ---------- */
:root {
  /* Radius (Fluent 2) */
  --radius-none:     0px;
  --radius-sm:       2px;
  --radius-md:       4px;
  --radius-lg:       8px;
  --radius-xl:       12px;
  --radius-circular: 9999px;

  /* Stroke width */
  --stroke-thin:     1px;
  --stroke-thick:    2px;
  --stroke-thicker:  3px;
  --stroke-thickest: 4px;

  /* Spacing — 4px grid */
  --space-none: 0px;
  --space-xxs:  2px;
  --space-xs:   4px;
  --space-snudge: 6px;
  --space-s:    8px;
  --space-mnudge: 10px;
  --space-m:   12px;
  --space-l:   16px;
  --space-xl:  20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;

  /* Type */
  --font-family-base: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
                      BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, Consolas,
                      "Liberation Mono", Menlo, monospace;

  --font-size-100: 10px;  --line-height-100: 14px;
  --font-size-200: 12px;  --line-height-200: 16px;
  --font-size-300: 14px;  --line-height-300: 20px;  /* BODY */
  --font-size-400: 16px;  --line-height-400: 22px;
  --font-size-500: 20px;  --line-height-500: 28px;
  --font-size-600: 24px;  --line-height-600: 32px;
  --font-size-hero-700: 28px; --line-height-hero-700: 36px;
  --font-size-hero-800: 32px; --line-height-hero-800: 40px;
  --font-size-hero-900: 40px; --line-height-hero-900: 52px;
  --font-size-hero-1000: 68px; --line-height-hero-1000: 92px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Motion */
  --duration-ultra-fast: 50ms;
  --duration-faster:    100ms;
  --duration-fast:      150ms;
  --duration-normal:    200ms;
  --duration-gentle:    250ms;
  --duration-slow:      300ms;
  --duration-slower:    400ms;
  --duration-ultra-slow: 500ms;

  --curve-easy-ease:        cubic-bezier(0.33, 0, 0.67, 1);
  --curve-decelerate-max:   cubic-bezier(0, 0, 0, 1);
  --curve-decelerate-mid:   cubic-bezier(0.1, 0.9, 0.2, 1);
  --curve-accelerate-max:   cubic-bezier(1, 0, 1, 1);
  --curve-linear:           cubic-bezier(0, 0, 1, 1);

  /* Z-index scale */
  --z-base:    0;
  --z-popover: 1000;
  --z-dropdown: 1500;
  --z-tooltip:  10001;
  --z-toast:    10002;
  --z-dialog:   10000;
}

/* ============================================================
   2. LIGHT MODE
   ============================================================ */
:root,
[data-theme="light"] {
  /* Neutral · backgrounds */
  --color-neutral-bg-1:           #FFFFFF;
  --color-neutral-bg-1-hover:     #F5F5F5;
  --color-neutral-bg-1-pressed:   #E0E0E0;
  --color-neutral-bg-1-selected:  #EBEBEB;
  --color-neutral-bg-2:           #FAFAFA;
  --color-neutral-bg-3:           #F5F5F5;
  --color-neutral-bg-4:           #F0F0F0;
  --color-neutral-bg-5:           #EBEBEB;
  --color-neutral-bg-6:           #E6E6E6;
  --color-neutral-bg-disabled:    #F0F0F0;
  --color-neutral-card-bg:        #FFFFFF;
  --color-neutral-card-bg-hover:  #FAFAFA;
  --color-neutral-card-bg-pressed:#F0F0F0;
  --color-neutral-card-bg-selected:#FAFAFA;
  --color-neutral-bg-inverted:    #292929;
  --color-neutral-bg-static:      #292929;

  /* Neutral · foreground */
  --color-neutral-fg-1:           #242424;
  --color-neutral-fg-2:           #424242;
  --color-neutral-fg-3:           #616161;
  --color-neutral-fg-4:           #707070;
  --color-neutral-fg-disabled:    #BDBDBD;
  --color-neutral-fg-on-brand:    #FFFFFF;
  --color-neutral-fg-inverted:    #FFFFFF;
  --color-neutral-fg-static-inverted: #FFFFFF;

  /* Neutral · stroke */
  --color-neutral-stroke-1:           #D1D1D1;
  --color-neutral-stroke-1-hover:     #C7C7C7;
  --color-neutral-stroke-2:           #E0E0E0;
  --color-neutral-stroke-3:           #F0F0F0;
  --color-neutral-stroke-accessible:  #616161;
  --color-neutral-stroke-disabled:    #E0E0E0;

  /* Focus */
  --color-stroke-focus-1: #FFFFFF;   /* inner */
  --color-stroke-focus-2: #000000;   /* outer */

  /* Brand · aliases (driven by --brand-* ramp from brand file) */
  --color-brand-bg:              var(--brand-80);
  --color-brand-bg-hover:        var(--brand-70);
  --color-brand-bg-pressed:      var(--brand-40);
  --color-brand-bg-selected:     var(--brand-60);
  --color-brand-bg-2:            var(--brand-160);
  --color-brand-bg-2-hover:      var(--brand-150);
  --color-brand-bg-2-pressed:    var(--brand-130);
  --color-brand-bg-static:       var(--brand-80);

  --color-brand-fg-1:            var(--brand-80);
  --color-brand-fg-2:            var(--brand-70);
  --color-brand-fg-link:         var(--brand-70);
  --color-brand-fg-link-hover:   var(--brand-60);
  --color-brand-fg-link-pressed: var(--brand-40);
  --color-brand-fg-on-light:     var(--brand-80);

  --color-brand-stroke-1:        var(--brand-80);
  --color-brand-stroke-2:        var(--brand-140);

  --color-compound-brand-fg-1:         var(--brand-80);
  --color-compound-brand-fg-1-hover:   var(--brand-70);
  --color-compound-brand-fg-1-pressed: var(--brand-60);
  --color-compound-brand-bg:           var(--brand-80);
  --color-compound-brand-bg-hover:     var(--brand-70);
  --color-compound-brand-bg-pressed:   var(--brand-40);
  --color-compound-brand-stroke:       var(--brand-80);
  --color-compound-brand-stroke-hover: var(--brand-70);
  --color-compound-brand-stroke-pressed:var(--brand-60);

  /* Status */
  --color-status-success-bg-1:    #F1FAF1;
  --color-status-success-bg-3:    #0E7A0D;
  --color-status-success-fg-1:    #0E7A0D;
  --color-status-success-border-1:#9FD89F;

  --color-status-warning-bg-1:    #FFF9F5;
  --color-status-warning-bg-3:    #BC4B09;
  --color-status-warning-fg-1:    #BC4B09;
  --color-status-warning-border-1:#FDCFB4;

  --color-status-danger-bg-1:     #FDF3F4;
  --color-status-danger-bg-3:     #B10E1C;
  --color-status-danger-fg-1:     #B10E1C;
  --color-status-danger-border-1: #EEACB2;

  --color-status-info-bg-1:       var(--color-brand-bg-2);
  --color-status-info-fg-1:       var(--color-brand-fg-1);
  --color-status-info-border-1:   var(--color-brand-stroke-2);

  /* Shadows · light */
  --shadow-2:  0 1px  2px  rgba(0,0,0,0.14), 0 0   2px rgba(0,0,0,0.12);
  --shadow-4:  0 2px  4px  rgba(0,0,0,0.14), 0 0   2px rgba(0,0,0,0.12);
  --shadow-8:  0 4px  8px  rgba(0,0,0,0.14), 0 0   2px rgba(0,0,0,0.12);
  --shadow-16: 0 8px  16px rgba(0,0,0,0.14), 0 0   2px rgba(0,0,0,0.12);
  --shadow-28: 0 14px 28px rgba(0,0,0,0.14), 0 0   8px rgba(0,0,0,0.12);
  --shadow-64: 0 32px 64px rgba(0,0,0,0.14), 0 0   8px rgba(0,0,0,0.12);

  /* Brand-tinted shadows (optional, used by brand-colored cards) */
  --shadow-brand-8:  0 4px  8px rgba(0,0,0,0.10), 0 0 2px rgba(0,0,0,0.10);

  color-scheme: light;
}

/* ============================================================
   3. DARK MODE
   ============================================================ */
[data-theme="dark"] {
  /* Neutral · backgrounds */
  --color-neutral-bg-1:           #292929;
  --color-neutral-bg-1-hover:     #3D3D3D;
  --color-neutral-bg-1-pressed:   #1F1F1F;
  --color-neutral-bg-1-selected:  #333333;
  --color-neutral-bg-2:           #1F1F1F;
  --color-neutral-bg-3:           #141414;
  --color-neutral-bg-4:           #0A0A0A;
  --color-neutral-bg-5:           #000000;
  --color-neutral-bg-6:           #333333;
  --color-neutral-bg-disabled:    #141414;
  --color-neutral-card-bg:        #333333;
  --color-neutral-card-bg-hover:  #3D3D3D;
  --color-neutral-card-bg-pressed:#292929;
  --color-neutral-card-bg-selected:#3D3D3D;
  --color-neutral-bg-inverted:    #FFFFFF;
  --color-neutral-bg-static:      #FFFFFF;

  /* Neutral · foreground */
  --color-neutral-fg-1:           #FFFFFF;
  --color-neutral-fg-2:           #D6D6D6;
  --color-neutral-fg-3:           #ADADAD;
  --color-neutral-fg-4:           #999999;
  --color-neutral-fg-disabled:    #5C5C5C;
  --color-neutral-fg-on-brand:    #FFFFFF;
  --color-neutral-fg-inverted:    #242424;
  --color-neutral-fg-static-inverted: #242424;

  /* Neutral · stroke */
  --color-neutral-stroke-1:           #666666;
  --color-neutral-stroke-1-hover:     #757575;
  --color-neutral-stroke-2:           #525252;
  --color-neutral-stroke-3:           #3D3D3D;
  --color-neutral-stroke-accessible:  #ADADAD;
  --color-neutral-stroke-disabled:    #3D3D3D;

  /* Focus */
  --color-stroke-focus-1: #000000;
  --color-stroke-focus-2: #FFFFFF;

  /* Brand · filled-button surfaces (white #FFFFFF label).
     AA fix (loop3, CR-THEME-dark-button-label-contrast): white-on-bg must be >=4.5:1
     for body-weight button text. By WCAG 2.x, white clears 4.5:1 only at brand-80
     (#00796B, 5.32) or darker — brand-90 (#14897B) is 4.29 (FAIL), brand-100 (#2A9D8F)
     3.32 (FAIL). So every interactive state stays at brand-80 or darker, getting
     DARKER on hover/pressed to preserve state separation in dark mode. */
  --color-brand-bg:              var(--brand-80);   /* rest:    white 5.32:1 PASS */
  --color-brand-bg-hover:        var(--brand-70);   /* hover:   white 5.82:1 PASS (darker) */
  --color-brand-bg-pressed:      var(--brand-60);   /* pressed: white 6.45:1 PASS (darker still) */
  --color-brand-bg-selected:     var(--brand-80);   /* selected:white 5.32:1 PASS */
  --color-brand-bg-2:            var(--brand-20);
  --color-brand-bg-2-hover:      var(--brand-30);
  --color-brand-bg-2-pressed:    var(--brand-40);
  --color-brand-bg-static:       var(--brand-80);

  --color-brand-fg-1:            var(--brand-110);  /* AA fix: 5.96:1 on #292929, 5.18:1 on #333333 (brand-100 was 4.38/3.80) */
  --color-brand-fg-2:            var(--brand-110);
  --color-brand-fg-link:         var(--brand-110);  /* AA fix: link text needs >=4.5:1 in dark mode */
  --color-brand-fg-link-hover:   var(--brand-110);
  --color-brand-fg-link-pressed: var(--brand-90);
  --color-brand-fg-on-light:     var(--brand-80);

  --color-brand-stroke-1:        var(--brand-100);
  --color-brand-stroke-2:        var(--brand-50);

  --color-compound-brand-fg-1:         var(--brand-100);
  --color-compound-brand-fg-1-hover:   var(--brand-110);
  --color-compound-brand-fg-1-pressed: var(--brand-90);
  /* Compound (Fluent accent) filled buttons also carry a white label — match the
     brand-bg family so they clear white 4.5:1 in every state (loop3 AA fix). */
  --color-compound-brand-bg:           var(--brand-80);   /* white 5.32:1 PASS */
  --color-compound-brand-bg-hover:     var(--brand-70);   /* white 5.82:1 PASS */
  --color-compound-brand-bg-pressed:   var(--brand-60);   /* white 6.45:1 PASS */
  --color-compound-brand-stroke:       var(--brand-100);
  --color-compound-brand-stroke-hover: var(--brand-110);
  --color-compound-brand-stroke-pressed:var(--brand-90);

  /* Status · dark */
  --color-status-success-bg-1:    #052505;
  --color-status-success-bg-3:    #54B054;
  --color-status-success-fg-1:    #54B054;
  --color-status-success-border-1:#107C10;

  --color-status-warning-bg-1:    #4A1E04;
  --color-status-warning-bg-3:    #F7A668;
  --color-status-warning-fg-1:    #F7A668;
  --color-status-warning-border-1:#BC4B09;

  --color-status-danger-bg-1:     #3B0509;
  --color-status-danger-bg-3:     #DC626D;
  --color-status-danger-fg-1:     #DC626D;
  --color-status-danger-border-1: #B10E1C;

  --color-status-info-bg-1:       var(--color-brand-bg-2);
  --color-status-info-fg-1:       var(--color-brand-fg-1);
  --color-status-info-border-1:   var(--color-brand-stroke-2);

  /* Shadows · dark (×2 opacity) */
  --shadow-2:  0 1px  2px  rgba(0,0,0,0.28), 0 0   2px rgba(0,0,0,0.24);
  --shadow-4:  0 2px  4px  rgba(0,0,0,0.28), 0 0   2px rgba(0,0,0,0.24);
  --shadow-8:  0 4px  8px  rgba(0,0,0,0.28), 0 0   2px rgba(0,0,0,0.24);
  --shadow-16: 0 8px  16px rgba(0,0,0,0.28), 0 0   2px rgba(0,0,0,0.24);
  --shadow-28: 0 14px 28px rgba(0,0,0,0.28), 0 0   8px rgba(0,0,0,0.24);
  --shadow-64: 0 32px 64px rgba(0,0,0,0.28), 0 0   8px rgba(0,0,0,0.24);

  --shadow-brand-8:  0 4px 8px rgba(0,0,0,0.40), 0 0 2px rgba(0,0,0,0.30);

  color-scheme: dark;
}

/* ---------- 4. SYSTEM PREFERENCE (auto) ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-ultra-fast: 0.01ms;
    --duration-faster:     0.01ms;
    --duration-fast:       0.01ms;
    --duration-normal:     0.01ms;
    --duration-gentle:     0.01ms;
    --duration-slow:       0.01ms;
    --duration-slower:     0.01ms;
    --duration-ultra-slow: 0.01ms;
  }
}