/* ============================================================
   Kaze (風) Design System — Design Tokens
   Ultra-minimalist, warm-zinc token system (sand-tinted)
   Optimized for Japanese typography & data-dense financial UI
   ============================================================ */

:root {
  /* ── Color: Warm Zinc Scale (sand-tinted) ─────────────── */
  --zinc-50:  #faf9f7;
  --zinc-100: #f5f3f0;
  --zinc-200: #e7e4df;
  --zinc-300: #d6d2cc;
  --zinc-400: #a8a29e;
  --zinc-500: #78716c;
  --zinc-600: #57534e;
  --zinc-700: #44403c;
  --zinc-800: #292524;
  --zinc-900: #1c1917;
  --zinc-950: #0c0a09;

  /* ── Color: Cool Slate Scale (purple-tinted) ─────────── */
  --slate-50:  #f8f8fa;
  --slate-100: #f0eff4;
  --slate-200: #e0dfe8;
  --slate-300: #cccad8;
  --slate-400: #6b6880;
  --slate-500: #56536b;
  --slate-600: #423f57;
  --slate-700: #302e40;
  --slate-800: #211f2c;
  --slate-900: #16141f;
  --slate-950: #0f0e16;

  /* ── Color: Palette (12 hues × 10 shades) ─────────────── */

  --red-50:  #fef2f2;  --red-100: #fee2e2;  --red-200: #fecaca;
  --red-300: #fca5a5;  --red-400: #f87171;  --red-500: #ef4444;
  --red-600: #dc2626;  --red-700: #b91c1c;  --red-800: #991b1b;
  --red-900: #7f1d1d;

  --orange-50:  #fff7ed;  --orange-100: #ffedd5;  --orange-200: #fed7aa;
  --orange-300: #fdba74;  --orange-400: #fb923c;  --orange-500: #f97316;
  --orange-600: #ea580c;  --orange-700: #c2410c;  --orange-800: #9a3412;
  --orange-900: #7c2d12;

  --amber-50:  #fffbeb;  --amber-100: #fef3c7;  --amber-200: #fde68a;
  --amber-300: #fcd34d;  --amber-400: #fbbf24;  --amber-500: #f59e0b;
  --amber-600: #d97706;  --amber-700: #b45309;  --amber-800: #92400e;
  --amber-900: #78350f;

  --yellow-50:  #fefce8;  --yellow-100: #fef9c3;  --yellow-200: #fef08a;
  --yellow-300: #fde047;  --yellow-400: #facc15;  --yellow-500: #eab308;
  --yellow-600: #ca8a04;  --yellow-700: #a16207;  --yellow-800: #854d0e;
  --yellow-900: #713f12;

  --lime-50:  #f7fee7;  --lime-100: #ecfccb;  --lime-200: #d9f99d;
  --lime-300: #bef264;  --lime-400: #a3e635;  --lime-500: #84cc16;
  --lime-600: #65a30d;  --lime-700: #4d7c0f;  --lime-800: #3f6212;
  --lime-900: #365314;

  --green-50:  #f0fdf4;  --green-100: #dcfce7;  --green-200: #bbf7d0;
  --green-300: #86efac;  --green-400: #4ade80;  --green-500: #22c55e;
  --green-600: #16a34a;  --green-700: #15803d;  --green-800: #166534;
  --green-900: #14532d;

  --emerald-50:  #ecfdf5;  --emerald-100: #d1fae5;  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;  --emerald-400: #34d399;  --emerald-500: #10b981;
  --emerald-600: #059669;  --emerald-700: #047857;  --emerald-800: #065f46;
  --emerald-900: #064e3b;

  --teal-50:  #f0fdfa;  --teal-100: #ccfbf1;  --teal-200: #99f6e4;
  --teal-300: #5eead4;  --teal-400: #2dd4bf;  --teal-500: #14b8a6;
  --teal-600: #0d9488;  --teal-700: #0f766e;  --teal-800: #115e59;
  --teal-900: #134e4a;

  --cyan-50:  #ecfeff;  --cyan-100: #cffafe;  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;  --cyan-400: #22d3ee;  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;  --cyan-700: #0e7490;  --cyan-800: #155e75;
  --cyan-900: #164e63;

  --blue-50:  #eff6ff;  --blue-100: #dbeafe;  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;  --blue-400: #60a5fa;  --blue-500: #3b82f6;
  --blue-600: #2563eb;  --blue-700: #1d4ed8;  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  --violet-50:  #f5f3ff;  --violet-100: #ede9fe;  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;  --violet-400: #a78bfa;  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;  --violet-700: #6d28d9;  --violet-800: #5b21b6;
  --violet-900: #4c1d95;

  --pink-50:  #fdf2f8;  --pink-100: #fce7f3;  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;  --pink-400: #f472b6;  --pink-500: #ec4899;
  --pink-600: #db2777;  --pink-700: #be185d;  --pink-800: #9d174d;
  --pink-900: #831843;

  /* ── Color: Accent (dual-accent for category tagging) ── */
  --color-accent-a:     var(--blue-500);
  --color-accent-a-light: var(--blue-50);
  --color-accent-a-fg:  var(--blue-600);
  --color-accent-b:     var(--red-500);
  --color-accent-b-light: var(--red-50);
  --color-accent-b-fg:  var(--red-600);

  /* ── Color: Semantic ───────────────────────────────────── */
  --color-bg:            #ffffff;
  --color-bg-secondary:  var(--zinc-50);
  --color-bg-tertiary:   var(--zinc-100);
  --color-bg-inverse:    var(--zinc-950);

  --color-fg:            var(--zinc-950);
  /* NOTE: fg-secondary (zinc-500) is intentionally lighter than fg-muted (zinc-600).
     fg-secondary = supplementary text (timestamps, metadata) — lower emphasis.
     fg-muted     = de-emphasized but still readable body text — mid emphasis.
     This follows the pattern: fg > fg-muted > fg-secondary > fg-tertiary. */
  --color-fg-secondary:  var(--zinc-500);
  --color-fg-tertiary:   var(--zinc-400);
  --color-fg-inverse:    #ffffff;
  --color-fg-muted:      var(--zinc-600);

  --color-border:        var(--zinc-200);
  --color-border-strong: var(--zinc-300);
  --color-border-subtle: var(--zinc-100);

  --color-surface:       #ffffff;
  --color-surface-hover: var(--zinc-50);
  --color-surface-active: var(--zinc-100);

  /* Primary = Black (zinc-950) */
  --color-primary:       var(--zinc-950);
  --color-primary-fg:    #ffffff;
  --color-primary-hover: var(--zinc-800);

  /* Secondary */
  --color-secondary:     var(--zinc-100);
  --color-secondary-fg:  var(--zinc-900);
  --color-secondary-hover: var(--zinc-200);

  /* ── Color: Status (→ palette refs) ───────────────────── */
  --color-positive:       var(--emerald-500);
  --color-positive-light: var(--emerald-50);
  --color-positive-fg:    var(--emerald-600);
  --color-positive-strong: var(--emerald-700);

  --color-negative:       var(--red-500);
  --color-negative-light: var(--red-50);
  --color-negative-fg:    var(--red-600);
  --color-negative-strong: var(--red-700);

  --color-warning:        var(--amber-500);
  --color-warning-light:  var(--amber-50);
  --color-warning-fg:     var(--amber-600);
  --color-warning-strong: var(--amber-700);

  --color-info:           var(--blue-500);
  --color-info-light:     var(--blue-50);
  --color-info-fg:        var(--blue-600);
  --color-info-strong:    var(--blue-700);

  /* Overlay & Error ring */
  --color-overlay:        rgba(0, 0, 0, 0.5);
  --color-error-ring:     rgba(239, 68, 68, 0.2);

  /* ── Color: Charts (→ palette refs, 12 named) ────────── */
  --chart-blue:     var(--blue-500);
  --chart-amber:    var(--amber-500);
  --chart-emerald:  var(--emerald-500);
  --chart-pink:     var(--pink-500);
  --chart-cyan:     var(--cyan-500);
  --chart-red:      var(--red-500);
  --chart-lime:     var(--lime-500);
  --chart-purple:   var(--violet-500);
  --chart-orange:   var(--orange-500);
  --chart-teal:     var(--teal-500);
  --chart-yellow:   var(--yellow-500);
  --chart-green:    var(--green-500);

  /* Numbered aliases for programmatic access */
  --chart-1:  var(--chart-blue);
  --chart-2:  var(--chart-emerald);
  --chart-3:  var(--chart-amber);
  --chart-4:  var(--chart-pink);
  --chart-5:  var(--chart-cyan);
  --chart-6:  var(--chart-red);
  --chart-7:  var(--chart-lime);
  --chart-8:  var(--chart-purple);
  --chart-9:  var(--chart-orange);
  --chart-10: var(--chart-teal);
  --chart-11: var(--chart-yellow);
  --chart-12: var(--chart-green);

  /* ── Typography ────────────────────────────────────────── */
  --font-sans: var(--font-montserrat, "Montserrat"), var(--font-noto-sans-jp, "Noto Sans JP"), -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
    sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

  /* 16px base — CJK body text standard */
  --font-size-2xs:  0.75rem;     /* 12px — micro labels */
  --font-size-xs:   0.8125rem;   /* 13px — captions */
  --font-size-sm:   0.875rem;    /* 14px — body small */
  --font-size-base: 1rem;        /* 16px — body */
  --font-size-md:   1.0625rem;   /* 17px */
  --font-size-lg:   1.125rem;    /* 18px */
  --font-size-xl:   1.25rem;     /* 20px */
  --font-size-2xl:  1.5rem;      /* 24px */
  --font-size-3xl:  1.875rem;    /* 30px */
  --font-size-4xl:  2.25rem;     /* 36px — hero numbers */
  --font-size-5xl:  2.5rem;      /* 40px — large hero */

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

  /* Line heights — taller for Japanese */
  --line-height-tight:  1.25;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:  1.75;  /* CJK body text */

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.1em;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2:   0.5rem;    /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-none: 0;
  --radius-sharp: 0px;      /* deliberate zero radius — typographic / tool UI */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.625rem;  /* 10px — default card */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-full: 9999px;

  /* 4-tier semantic radius (inspired by DaisyUI) */
  --radius-box:      var(--radius-lg);     /* Card, Modal, Panel */
  --radius-field:    var(--radius-md);     /* Input, Button, Select */
  --radius-selector: var(--radius-sm);     /* Checkbox, Toggle, Badge */
  /* --radius-sharp: available for deliberate zero-radius design decisions */

  /* ── Shadows — Minimal ─────────────────────────────────── */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.1);

  /* ── Ring (focus) ───────────────────────────────────────── */
  --ring-color:  rgba(120, 113, 108, 0.3);
  --ring-offset: 2px;
  --ring-width:  2px;

  /* ── Transitions ───────────────────────────────────────── */
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   200ms;
  --duration-slower: 300ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ───────────────────────────────────────────── */
  --z-dropdown:  50;
  --z-sticky:    100;
  --z-overlay:   200;
  --z-modal:     300;
  --z-toast:     400;
  --z-tooltip:   500;

  /* ── Layout ────────────────────────────────────────────── */
  --sidebar-width: 220px;
  --topbar-height: 3.5rem;
  --content-max-width: 1280px;

  /* ── Fluid Typography (inspired by Pico CSS) ─────────── */
  /* Root font-size scales fluidly between 640px and 1280px viewport */
  /* Components using rem will scale proportionally */
  font-size: clamp(15px, 0.9375rem + 0.1vw, 16px);
  font-feature-settings: "palt" 1;

  /* ── Breakpoints (reference only — use @media) ────────── */
  /* sm:  640px  — モバイル横向き */
  /* md:  768px  — タブレット */
  /* lg:  1024px — デスクトップ */
  /* xl:  1280px — ワイドスクリーン */
  /* 2xl: 1536px — 超ワイド */
}

/* ── Dark Theme ────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:            var(--zinc-950);
  --color-bg-secondary:  var(--zinc-900);
  --color-bg-tertiary:   var(--zinc-800);
  --color-bg-inverse:    #ffffff;

  --color-fg:            var(--zinc-50);
  --color-fg-secondary:  var(--zinc-400);
  --color-fg-tertiary:   var(--zinc-400);  /* Was zinc-500 (~3.9:1) — zinc-400 meets WCAG AA 4.5:1 on dark bg */
  --color-fg-inverse:    var(--zinc-950);
  --color-fg-muted:      var(--zinc-400);

  --color-border:        var(--zinc-800);
  --color-border-strong: var(--zinc-700);
  --color-border-subtle: var(--zinc-900);

  --color-surface:       var(--zinc-900);
  --color-surface-hover: var(--zinc-800);
  --color-surface-active: var(--zinc-700);

  --color-primary:       #ffffff;
  --color-primary-fg:    var(--zinc-950);
  --color-primary-hover: var(--zinc-200);

  --color-secondary:     var(--zinc-800);
  --color-secondary-fg:  var(--zinc-100);
  --color-secondary-hover: var(--zinc-700);

  --color-positive:       var(--emerald-400);
  --color-positive-light: rgba(16, 185, 129, 0.1);
  --color-positive-fg:    var(--emerald-400);   /* Brighter green for dark bg readability */
  --color-positive-strong: var(--emerald-500);

  --color-negative:       var(--red-400);
  --color-negative-light: rgba(239, 68, 68, 0.1);
  --color-negative-fg:    var(--red-400);       /* Brighter red for dark bg readability */
  --color-negative-strong: var(--red-500);

  --color-warning:        var(--amber-400);
  --color-warning-light:  rgba(245, 158, 11, 0.1);
  --color-warning-fg:     var(--amber-400);     /* Brighter amber for dark bg readability */
  --color-warning-strong: var(--amber-500);

  --color-info:           var(--blue-400);
  --color-info-light:     rgba(59, 130, 246, 0.1);
  --color-info-fg:        var(--blue-400);      /* Brighter blue for dark bg readability */
  --color-info-strong:    var(--blue-500);

  --color-accent-a:     var(--blue-400);
  --color-accent-a-light: rgba(59, 130, 246, 0.1);
  --color-accent-a-fg:  var(--blue-400);
  --color-accent-b:     var(--red-400);
  --color-accent-b-light: rgba(239, 68, 68, 0.1);
  --color-accent-b-fg:  var(--red-400);

  --color-overlay:        rgba(0, 0, 0, 0.7);

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.5);

  --ring-color:  rgba(168, 162, 158, 0.3);
}

/* ── Cool Palette (slate-based, purple-tinted) ────────────── */
/* Switch from warm zinc to cool slate via data-palette="cool".
   Composable with data-theme: works for both light and dark. */
[data-palette="cool"] {
  --color-bg:            #ffffff;
  --color-bg-secondary:  var(--slate-50);
  --color-bg-tertiary:   var(--slate-100);
  --color-bg-inverse:    var(--slate-950);

  --color-fg:            var(--slate-950);
  --color-fg-secondary:  var(--slate-500);
  --color-fg-tertiary:   var(--slate-400);
  --color-fg-inverse:    #ffffff;
  --color-fg-muted:      var(--slate-600);

  --color-border:        var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-border-subtle: var(--slate-100);

  --color-surface:       #ffffff;
  --color-surface-hover: var(--slate-50);
  --color-surface-active: var(--slate-100);

  --color-primary:       var(--slate-950);
  --color-primary-fg:    #ffffff;
  --color-primary-hover: var(--slate-800);

  --color-secondary:     var(--slate-100);
  --color-secondary-fg:  var(--slate-900);
  --color-secondary-hover: var(--slate-200);

  --ring-color:  rgba(107, 104, 128, 0.3);
}

/* Cool palette × Dark theme */
[data-palette="cool"][data-theme="dark"] {
  --color-bg:            var(--slate-950);
  --color-bg-secondary:  var(--slate-900);
  --color-bg-tertiary:   var(--slate-800);
  --color-bg-inverse:    #ffffff;

  --color-fg:            var(--slate-50);
  --color-fg-secondary:  var(--slate-400);
  --color-fg-tertiary:   var(--slate-400);
  --color-fg-inverse:    var(--slate-950);
  --color-fg-muted:      var(--slate-400);

  --color-border:        var(--slate-800);
  --color-border-strong: var(--slate-700);
  --color-border-subtle: var(--slate-900);

  --color-surface:       var(--slate-900);
  --color-surface-hover: var(--slate-800);
  --color-surface-active: var(--slate-700);

  --color-primary:       #ffffff;
  --color-primary-fg:    var(--slate-950);
  --color-primary-hover: var(--slate-200);

  --color-secondary:     var(--slate-800);
  --color-secondary-fg:  var(--slate-100);
  --color-secondary-hover: var(--slate-700);

  --ring-color:  rgba(204, 202, 216, 0.3);
}

/* ── Dark Theme Fallback (JS-disabled) ────────────────────── */
/* When JS is unavailable, respect OS dark mode preference.
   If JS sets data-theme="light", this will NOT apply (thanks to :not()).
   If JS sets data-theme="dark", the [data-theme="dark"] block above
   takes precedence due to higher specificity. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            var(--zinc-950);
    --color-bg-secondary:  var(--zinc-900);
    --color-bg-tertiary:   var(--zinc-800);
    --color-bg-inverse:    #ffffff;

    --color-fg:            var(--zinc-50);
    --color-fg-secondary:  var(--zinc-400);
    --color-fg-tertiary:   var(--zinc-400);
    --color-fg-inverse:    var(--zinc-950);
    --color-fg-muted:      var(--zinc-400);

    --color-border:        var(--zinc-800);
    --color-border-strong: var(--zinc-700);
    --color-border-subtle: var(--zinc-900);

    --color-surface:       var(--zinc-900);
    --color-surface-hover: var(--zinc-800);
    --color-surface-active: var(--zinc-700);

    --color-primary:       #ffffff;
    --color-primary-fg:    var(--zinc-950);
    --color-primary-hover: var(--zinc-200);

    --color-secondary:     var(--zinc-800);
    --color-secondary-fg:  var(--zinc-100);
    --color-secondary-hover: var(--zinc-700);

    --color-positive:       var(--emerald-400);
    --color-positive-light: rgba(16, 185, 129, 0.1);
    --color-positive-fg:    var(--emerald-400);
    --color-positive-strong: var(--emerald-500);

    --color-negative:       var(--red-400);
    --color-negative-light: rgba(239, 68, 68, 0.1);
    --color-negative-fg:    var(--red-400);
    --color-negative-strong: var(--red-500);

    --color-warning:        var(--amber-400);
    --color-warning-light:  rgba(245, 158, 11, 0.1);
    --color-warning-fg:     var(--amber-400);
    --color-warning-strong: var(--amber-500);

    --color-info:           var(--blue-400);
    --color-info-light:     rgba(59, 130, 246, 0.1);
    --color-info-fg:        var(--blue-400);
    --color-info-strong:    var(--blue-500);

    --color-accent-a:     var(--blue-400);
    --color-accent-a-light: rgba(59, 130, 246, 0.1);
    --color-accent-a-fg:  var(--blue-400);
    --color-accent-b:     var(--red-400);
    --color-accent-b-light: rgba(239, 68, 68, 0.1);
    --color-accent-b-fg:  var(--red-400);

    --color-overlay:        rgba(0, 0, 0, 0.7);

    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.5);

    --ring-color:  rgba(168, 162, 158, 0.3);
  }
}