/*
 * tolv Design System — Design Tokens  (v0.4.0)
 * =====================================================================
 * 2層構成の素のCSSカスタムプロパティ。ビルド不要でどのページからも利用可。
 *   Layer 1 Primitive : Global (Tailwind v4) + Brand (tolv-navy)
 *   Layer 2 Semantic  : Global/Brand を参照する実使用トークン
 *
 * カラーは Light / Dark の2モード対応：
 *   :root                                → Light（既定）
 *   @media (prefers-color-scheme: dark)  → OSの設定に自動追従
 *   :root[data-theme="dark"] / ["light"] → 明示的に切替（自動より優先）
 *
 * 出典: Figma "tolv-design-system"  ⛔️ Token ページ (node 3619:3009 ほか)
 */

:root {
  /* ============ Layer 1 · Primitive ============ */

  /* ---- Global · Color (Tailwind v4 palettes) ---- */
  --color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cad5e2;--color-slate-400:#90a1b9;--color-slate-500:#62748e;--color-slate-600:#45556c;--color-slate-700:#314158;--color-slate-800:#1d293d;--color-slate-900:#0f172b;--color-slate-950:#020618;
  --color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5dc;--color-gray-400:#99a1af;--color-gray-500:#6a7282;--color-gray-600:#4a5565;--color-gray-700:#364153;--color-gray-800:#1e2939;--color-gray-900:#101828;--color-gray-950:#030712;
  --color-zinc-50:#fafafa;--color-zinc-100:#f4f4f5;--color-zinc-200:#e4e4e7;--color-zinc-300:#d4d4d8;--color-zinc-400:#9f9fa9;--color-zinc-500:#71717b;--color-zinc-600:#52525c;--color-zinc-700:#3f3f46;--color-zinc-800:#27272a;--color-zinc-900:#18181b;--color-zinc-950:#09090b;
  --color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a1a1a1;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-neutral-950:#0a0a0a;
  --color-stone-50:#fafaf9;--color-stone-100:#f5f5f4;--color-stone-200:#e7e5e4;--color-stone-300:#d6d3d1;--color-stone-400:#a6a09b;--color-stone-500:#79716b;--color-stone-600:#57534d;--color-stone-700:#44403b;--color-stone-800:#292524;--color-stone-900:#1c1917;--color-stone-950:#0c0a09;
  --color-mauve-50:#fafafa;--color-mauve-100:#f3f1f3;--color-mauve-200:#e7e4e7;--color-mauve-300:#d7d0d7;--color-mauve-400:#a89ea9;--color-mauve-500:#79697b;--color-mauve-600:#594c5b;--color-mauve-700:#463947;--color-mauve-800:#2a212c;--color-mauve-900:#1d161e;--color-mauve-950:#0c090c;
  --color-olive-50:#fbfbf9;--color-olive-100:#f4f4f0;--color-olive-200:#e8e8e3;--color-olive-300:#d8d8d0;--color-olive-400:#abab9c;--color-olive-500:#7c7c67;--color-olive-600:#5b5b4b;--color-olive-700:#474739;--color-olive-800:#2b2b22;--color-olive-900:#1d1d16;--color-olive-950:#0c0c09;
  --color-mist-50:#f9fbfb;--color-mist-100:#f1f3f3;--color-mist-200:#e3e7e8;--color-mist-300:#d0d6d8;--color-mist-400:#9ca8ab;--color-mist-500:#67787c;--color-mist-600:#4b585b;--color-mist-700:#394447;--color-mist-800:#22292b;--color-mist-900:#161b1d;--color-mist-950:#090b0c;
  --color-taupe-50:#fbfaf9;--color-taupe-100:#f3f1f1;--color-taupe-200:#e8e4e3;--color-taupe-300:#d8d2d0;--color-taupe-400:#aba09c;--color-taupe-500:#7c6d67;--color-taupe-600:#5b4f4b;--color-taupe-700:#473c39;--color-taupe-800:#2b2422;--color-taupe-900:#1d1816;--color-taupe-950:#0c0a09;
  --color-red-50:#fef2f2;--color-red-100:#ffe2e2;--color-red-200:#ffc9c9;--color-red-300:#ffa2a2;--color-red-400:#ff6467;--color-red-500:#fb2c36;--color-red-600:#e7000b;--color-red-700:#c10007;--color-red-800:#9f0712;--color-red-900:#82181a;--color-red-950:#460809;
  --color-orange-50:#fff7ed;--color-orange-100:#ffedd4;--color-orange-200:#ffd6a8;--color-orange-300:#ffb86a;--color-orange-400:#ff8904;--color-orange-500:#ff6900;--color-orange-600:#f54a00;--color-orange-700:#ca3500;--color-orange-800:#9f2d00;--color-orange-900:#7e2a0c;--color-orange-950:#441306;
  --color-amber-50:#fffbeb;--color-amber-100:#fef3c6;--color-amber-200:#fee685;--color-amber-300:#ffd230;--color-amber-400:#ffba00;--color-amber-500:#fd9a00;--color-amber-600:#e17100;--color-amber-700:#bb4d00;--color-amber-800:#973c00;--color-amber-900:#7b3306;--color-amber-950:#461901;
  --color-yellow-50:#fefce8;--color-yellow-100:#fef9c2;--color-yellow-200:#fff085;--color-yellow-300:#ffdf20;--color-yellow-400:#fcc800;--color-yellow-500:#efb100;--color-yellow-600:#d08700;--color-yellow-700:#a65f00;--color-yellow-800:#894b00;--color-yellow-900:#733e0a;--color-yellow-950:#432004;
  --color-lime-50:#f7fee7;--color-lime-100:#ecfcca;--color-lime-200:#d8f999;--color-lime-300:#bbf451;--color-lime-400:#9ae600;--color-lime-500:#7ccf00;--color-lime-600:#5ea500;--color-lime-700:#497d00;--color-lime-800:#3d6300;--color-lime-900:#35530e;--color-lime-950:#192e03;
  --color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#b9f8cf;--color-green-300:#7bf1a8;--color-green-400:#05df72;--color-green-500:#00c951;--color-green-600:#00a63e;--color-green-700:#008236;--color-green-800:#016630;--color-green-900:#0d542b;--color-green-950:#052e16;
  --color-emerald-50:#ecfdf5;--color-emerald-100:#d0fae5;--color-emerald-200:#a4f4cf;--color-emerald-300:#5ee9b5;--color-emerald-400:#00d492;--color-emerald-500:#00bc7d;--color-emerald-600:#009966;--color-emerald-700:#007a55;--color-emerald-800:#006045;--color-emerald-900:#004f3b;--color-emerald-950:#002c22;
  --color-teal-50:#f0fdfa;--color-teal-100:#cbfbf1;--color-teal-200:#96f7e4;--color-teal-300:#46ecd5;--color-teal-400:#00d5be;--color-teal-500:#00bba7;--color-teal-600:#009689;--color-teal-700:#00786f;--color-teal-800:#005f5a;--color-teal-900:#0b4f4a;--color-teal-950:#022f2e;
  --color-cyan-50:#ecfeff;--color-cyan-100:#cefafe;--color-cyan-200:#a2f4fd;--color-cyan-300:#53eafd;--color-cyan-400:#00d3f2;--color-cyan-500:#00b8db;--color-cyan-600:#0092b8;--color-cyan-700:#007595;--color-cyan-800:#005f78;--color-cyan-900:#104e64;--color-cyan-950:#053345;
  --color-sky-50:#f0f9ff;--color-sky-100:#dff2fe;--color-sky-200:#b8e6fe;--color-sky-300:#74d4ff;--color-sky-400:#00bcff;--color-sky-500:#00a6f4;--color-sky-600:#0084d1;--color-sky-700:#0069a8;--color-sky-800:#00598a;--color-sky-900:#024a70;--color-sky-950:#052f4a;
  --color-blue-50:#eff6ff;--color-blue-100:#dbeafe;--color-blue-200:#bedbff;--color-blue-300:#8ec5ff;--color-blue-400:#51a2ff;--color-blue-500:#2b7fff;--color-blue-600:#155dfc;--color-blue-700:#1447e6;--color-blue-800:#193cb8;--color-blue-900:#1c398e;--color-blue-950:#162456;
  --color-indigo-50:#eef2ff;--color-indigo-100:#e0e7ff;--color-indigo-200:#c6d2ff;--color-indigo-300:#a3b3ff;--color-indigo-400:#7c86ff;--color-indigo-500:#615fff;--color-indigo-600:#4f39f6;--color-indigo-700:#432dd7;--color-indigo-800:#372aac;--color-indigo-900:#312c85;--color-indigo-950:#1e1a4d;
  --color-violet-50:#f5f3ff;--color-violet-100:#ede9fe;--color-violet-200:#ddd6ff;--color-violet-300:#c4b4ff;--color-violet-400:#a684ff;--color-violet-500:#8e51ff;--color-violet-600:#7f22fe;--color-violet-700:#7008e7;--color-violet-800:#5d0ec0;--color-violet-900:#4d179a;--color-violet-950:#2f0d68;
  --color-purple-50:#faf5ff;--color-purple-100:#f3e8ff;--color-purple-200:#e9d4ff;--color-purple-300:#dab2ff;--color-purple-400:#c27aff;--color-purple-500:#ad46ff;--color-purple-600:#9810fa;--color-purple-700:#8200db;--color-purple-800:#6e11b0;--color-purple-900:#59168b;--color-purple-950:#3c0366;
  --color-fuchsia-50:#fdf4ff;--color-fuchsia-100:#fae8ff;--color-fuchsia-200:#f6cfff;--color-fuchsia-300:#f4a8ff;--color-fuchsia-400:#ed6bff;--color-fuchsia-500:#e12afb;--color-fuchsia-600:#c800de;--color-fuchsia-700:#a800b7;--color-fuchsia-800:#8a0194;--color-fuchsia-900:#721378;--color-fuchsia-950:#4b004f;
  --color-pink-50:#fdf2f8;--color-pink-100:#fce7f3;--color-pink-200:#fccee8;--color-pink-300:#fda5d5;--color-pink-400:#fb64b6;--color-pink-500:#f6339a;--color-pink-600:#e60076;--color-pink-700:#c6005c;--color-pink-800:#a3004c;--color-pink-900:#861043;--color-pink-950:#510424;
  --color-rose-50:#fff1f2;--color-rose-100:#ffe4e6;--color-rose-200:#ffccd3;--color-rose-300:#ffa1ad;--color-rose-400:#ff637e;--color-rose-500:#ff2056;--color-rose-600:#ec003f;--color-rose-700:#c70036;--color-rose-800:#a50036;--color-rose-900:#8b0836;--color-rose-950:#4d0218;
  --color-white:#ffffff; --color-black:#000000; --color-transparent:#ffffff00;

  /* ---- Global · Spacing ---- */
  --spacing-px:1px;--spacing-0-5:2px;--spacing-1:4px;--spacing-1-5:6px;--spacing-2:8px;--spacing-2-5:10px;--spacing-3:12px;--spacing-3-5:14px;--spacing-4:16px;--spacing-5:20px;--spacing-6:24px;--spacing-7:28px;--spacing-8:32px;--spacing-9:36px;--spacing-10:40px;--spacing-11:44px;--spacing-12:48px;--spacing-14:56px;--spacing-16:64px;--spacing-20:80px;--spacing-24:96px;--spacing-28:112px;--spacing-32:128px;--spacing-36:144px;--spacing-40:160px;--spacing-44:176px;--spacing-48:192px;--spacing-52:208px;--spacing-56:224px;--spacing-60:240px;--spacing-64:256px;--spacing-72:288px;--spacing-80:320px;--spacing-96:384px;

  /* ---- Global · Radius ---- */
  --radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-2xl:16px;--radius-3xl:24px;--radius-4xl:32px;--radius-full:9999px;

  /* ---- Global · Border width ---- */
  --border-width-1:1px;--border-width-2:2px;

  /* ---- Global · Container ---- */
  --container-xs:320px;--container-sm:384px;--container-md:448px;--container-lg:512px;--container-xl:576px;--container-2xl:672px;--container-3xl:768px;--container-4xl:896px;--container-5xl:1024px;--container-6xl:1152px;--container-7xl:1280px;

  /* ---- Global · Breakpoint ---- */
  --breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px;

  /* ---- Global · Typography primitives ---- */
  --font-family-sans:'Inter';
  --font-size-xs:12px;--font-size-sm:14px;--font-size-base:16px;--font-size-lg:18px;--font-size-xl:20px;--font-size-2xl:24px;--font-size-3xl:30px;--font-size-4xl:36px;--font-size-5xl:48px;--font-size-6xl:60px;--font-size-7xl:72px;--font-size-8xl:96px;--font-size-9xl:128px;
  --font-leading-4:16px;--font-leading-5:20px;--font-leading-6:24px;--font-leading-7:28px;--font-leading-8:32px;--font-leading-9:36px;--font-leading-10:40px;
  --font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;
  --font-tracking-normal:0; --font-tracking-wider:0.8em;

  /* ---- Brand · tolv-navy (Global と並列のプリミティブ) ---- 出典: Figma Brand/color/tolv-navy (3619:1491) */
  --color-tolv-navy-50:#f8f7f9;--color-tolv-navy-100:#f1f0f2;--color-tolv-navy-200:#e7e5ea;--color-tolv-navy-300:#d0ccd5;--color-tolv-navy-400:#a099ab;--color-tolv-navy-500:#716681;--color-tolv-navy-600:#594d6c;--color-tolv-navy-700:#413357;--color-tolv-navy-800:#2a1a42;--color-tolv-navy-900:#1e0d38;--color-tolv-navy-950:#12002d;

  /* ============ Layer 2 · Semantic (color = Light) ============ */
  --color-fg-basic-primary: var(--color-neutral-950);
  --color-fg-basic-secondary: var(--color-neutral-600);
  --color-fg-basic-primary-hover: var(--color-neutral-800);
  --color-fg-basic-primary-disabled: var(--color-neutral-300);
  --color-fg-basic-secondary-hover: var(--color-neutral-500);
  --color-fg-basic-secondary-disabled: var(--color-neutral-300);
  --color-fg-basic-inverse: var(--color-neutral-50);
  --color-fg-basic-inverse-hover: var(--color-neutral-200);
  --color-fg-basic-inverse-disabled: var(--color-neutral-300);
  --color-border-basic-primary: var(--color-slate-300);
  --color-fg-brand-primary: var(--color-tolv-navy-950);
  --color-fg-brand-primary-hover: var(--color-tolv-navy-800);
  --color-fg-brand-primary-disabled: var(--color-neutral-300);
  --color-fg-brand-inverse: var(--color-tolv-navy-50);
  --color-fg-brand-inverse-hover: var(--color-tolv-navy-100);
  --color-fg-brand-inverse-disabled: var(--color-neutral-300);
  --color-fg-caution-primary: var(--color-red-600);
  --color-fg-caution-primary-hover: var(--color-red-400);
  --color-fg-caution-primary-disabled: var(--color-neutral-300);
  --color-bg-basic-primary: var(--color-white);
  --color-bg-basic-primary-hover: var(--color-neutral-50);
  --color-bg-basic-primary-disabled: var(--color-transparent);
  --color-bg-basic-inverse: var(--color-black);
  --color-bg-basic-inverse-hover: var(--color-neutral-950);
  --color-bg-basic-inverse-disabled: var(--color-transparent);
  --color-bg-brand-primary: var(--color-tolv-navy-950);
  --color-bg-brand-primary-hover: var(--color-tolv-navy-800);
  --color-bg-brand-primary-disabled: var(--color-transparent);
  --color-bg-brand-secondary: var(--color-tolv-navy-100);
  --color-bg-brand-secondary-hover: var(--color-tolv-navy-200);
  --color-bg-brand-secondary-disabled: var(--color-transparent);
  --color-bg-brand-tertiary: var(--color-white);
  --color-bg-brand-tertiary-hover: var(--color-tolv-navy-50);
  --color-bg-brand-tertiary-disabled: var(--color-transparent);
  --color-bg-caution-primary: var(--color-red-600);
  --color-bg-caution-primary-hover: var(--color-red-400);
  --color-bg-caution-primary-disabled: var(--color-transparent);
  --color-bg-caution-secondary: var(--color-red-100);
  --color-bg-caution-secondary-hover: var(--color-red-200);
  --color-bg-caution-secondary-disabled: var(--color-transparent);
  --color-bg-caution-tertiary: var(--color-white);
  --color-bg-caution-tertiary-hover: var(--color-red-50);
  --color-bg-caution-tertiary-disabled: var(--color-transparent);
  --color-border-basic-primary-hover: var(--color-slate-200);
  --color-border-basic-primary-disabled: var(--color-transparent);
  --color-border-basic-secondary: var(--color-slate-600);
  --color-border-basic-secondary-hover: var(--color-slate-500);
  --color-border-basic-secondary-disabled: var(--color-transparent);
  --color-border-brand-primary: var(--color-tolv-navy-300);
  --color-border-brand-primary-hover: var(--color-tolv-navy-200);
  --color-border-brand-primary-disabled: var(--color-transparent);
  --color-border-brand-secondary: var(--color-tolv-navy-600);
  --color-border-brand-secondary-hover: var(--color-tolv-navy-500);
  --color-border-brand-secondary-disabled: var(--color-transparent);
  --color-border-caution-primary: var(--color-red-600);
  --color-border-caution-primary-hover: var(--color-red-500);
  --color-border-caution-primary-disabled: var(--color-transparent);

  /* ---- Semantic · Spacing (Min/Small/Medium/Large) ---- */
  --space-min: var(--spacing-0-5);   /* 2px */
  --space-small: var(--spacing-1);   /* 4px */
  --space-medium: var(--spacing-2);  /* 8px */
  --space-large: var(--spacing-4);   /* 16px */

  /* ---- Semantic · Radius (Min/Small/Medium/Large) ----
   * None / Full は Global の --radius-none(0) / --radius-full(9999px) をそのまま使用 */
  --radius-min: var(--radius-xs);     /* 2px */
  --radius-small: var(--radius-sm);   /* 4px */
  --radius-medium: var(--radius-lg);  /* 8px */
  --radius-large: var(--radius-2xl);  /* 16px */

  /* ---- Semantic · Border width (Regular/Bold) ---- */
  --border-regular: var(--border-width-1); /* 1px */
  --border-bold: 4px;                       /* 4px（Global に直接の primitive なし） */

  /* ---- Semantic · Opacity ---- */
  --opacity-weaker: 5%;
  --opacity-weak: 20%;
  --opacity-medium: 50%;
  --opacity-strong: 80%;
  --opacity-stronger: 95%;
  --opacity-max: 100%;

  /* ---- Semantic · Breakpoint (Small/Medium/Large) ---- */
  --breakpoint-small: var(--breakpoint-sm);   /* 640px */
  --breakpoint-medium: var(--breakpoint-md);  /* 768px */
  --breakpoint-large: var(--breakpoint-lg);   /* 1024px */

  /* ---- Semantic · Typography ---- 出典: Figma Font セクション (3624:5754)
   * 注: Semantic の Sans は Noto Sans JP（Global の Inter とは別）、Mono は Noto Sans Mono */
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --font-mono: 'Noto Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-size-min: var(--font-size-xs);       /* 12px */
  --font-size-small: var(--font-size-base);   /* 16px */
  --font-size-medium: var(--font-size-lg);    /* 18px */
  --font-size-large: var(--font-size-xl);     /* 20px */
  --font-size-xlarge: var(--font-size-3xl);   /* 30px */
  --line-height-min: 18px;                     /* Global に primitive なし */
  --line-height-small: var(--font-leading-6);  /* 24px */
  --line-height-medium: var(--font-leading-7); /* 28px */
  --line-height-large: var(--font-leading-8);  /* 32px */
  --line-height-xlarge: 44px;                  /* Global に primitive なし */
  /* weight は Global の --font-weight-light(300)/medium(500)/bold(700) を使用 */

  /* ---- Convenience aliases (not from Figma semantic set; kept for continuity) ---- */
  --radius-card: var(--radius-3xl);    /* 24px */
  --radius-control: var(--radius-xl);  /* 12px */
  --font-family-base: var(--font-sans); /* Semantic Sans = Noto Sans JP */
}

/* ---- Dark mode (auto: OS setting) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-fg-basic-primary: var(--color-neutral-50);
    --color-fg-basic-secondary: var(--color-neutral-400);
    --color-fg-basic-primary-hover: var(--color-neutral-200);
    --color-fg-basic-primary-disabled: var(--color-neutral-700);
    --color-fg-basic-secondary-hover: var(--color-neutral-500);
    --color-fg-basic-secondary-disabled: var(--color-neutral-700);
    --color-fg-basic-inverse: var(--color-neutral-950);
    --color-fg-basic-inverse-hover: var(--color-neutral-800);
    --color-fg-basic-inverse-disabled: var(--color-neutral-700);
    --color-border-basic-primary: var(--color-slate-700);
    --color-fg-brand-primary: var(--color-tolv-navy-50);
    --color-fg-brand-primary-hover: var(--color-tolv-navy-200);
    --color-fg-brand-primary-disabled: var(--color-neutral-700);
    --color-fg-brand-inverse: var(--color-tolv-navy-950);
    --color-fg-brand-inverse-hover: var(--color-tolv-navy-900);
    --color-fg-brand-inverse-disabled: var(--color-neutral-700);
    --color-fg-caution-primary: var(--color-red-400);
    --color-fg-caution-primary-hover: var(--color-red-600);
    --color-fg-caution-primary-disabled: var(--color-neutral-700);
    --color-bg-basic-primary: var(--color-black);
    --color-bg-basic-primary-hover: var(--color-neutral-950);
    --color-bg-basic-primary-disabled: var(--color-transparent);
    --color-bg-basic-inverse: var(--color-white);
    --color-bg-basic-inverse-hover: var(--color-neutral-50);
    --color-bg-basic-inverse-disabled: var(--color-transparent);
    --color-bg-brand-primary: var(--color-tolv-navy-50);
    --color-bg-brand-primary-hover: var(--color-tolv-navy-200);
    --color-bg-brand-primary-disabled: var(--color-transparent);
    --color-bg-brand-secondary: var(--color-tolv-navy-900);
    --color-bg-brand-secondary-hover: var(--color-tolv-navy-800);
    --color-bg-brand-secondary-disabled: var(--color-transparent);
    --color-bg-brand-tertiary: var(--color-black);
    --color-bg-brand-tertiary-hover: var(--color-tolv-navy-950);
    --color-bg-brand-tertiary-disabled: var(--color-transparent);
    --color-bg-caution-primary: var(--color-red-400);
    --color-bg-caution-primary-hover: var(--color-red-600);
    --color-bg-caution-primary-disabled: var(--color-transparent);
    --color-bg-caution-secondary: var(--color-red-900);
    --color-bg-caution-secondary-hover: var(--color-red-800);
    --color-bg-caution-secondary-disabled: var(--color-transparent);
    --color-bg-caution-tertiary: var(--color-black);
    --color-bg-caution-tertiary-hover: var(--color-red-950);
    --color-bg-caution-tertiary-disabled: var(--color-transparent);
    --color-border-basic-primary-hover: var(--color-slate-800);
    --color-border-basic-primary-disabled: var(--color-transparent);
    --color-border-basic-secondary: var(--color-slate-400);
    --color-border-basic-secondary-hover: var(--color-slate-500);
    --color-border-basic-secondary-disabled: var(--color-transparent);
    --color-border-brand-primary: var(--color-tolv-navy-700);
    --color-border-brand-primary-hover: var(--color-tolv-navy-800);
    --color-border-brand-primary-disabled: var(--color-transparent);
    --color-border-brand-secondary: var(--color-tolv-navy-400);
    --color-border-brand-secondary-hover: var(--color-tolv-navy-500);
    --color-border-brand-secondary-disabled: var(--color-transparent);
    --color-border-caution-primary: var(--color-red-400);
    --color-border-caution-primary-hover: var(--color-red-500);
    --color-border-caution-primary-disabled: var(--color-transparent);
  }
}

/* ---- Dark mode (manual override) ---- */
:root[data-theme="dark"] {
  --color-fg-basic-primary: var(--color-neutral-50);
  --color-fg-basic-secondary: var(--color-neutral-400);
  --color-fg-basic-primary-hover: var(--color-neutral-200);
  --color-fg-basic-primary-disabled: var(--color-neutral-700);
  --color-fg-basic-secondary-hover: var(--color-neutral-500);
  --color-fg-basic-secondary-disabled: var(--color-neutral-700);
  --color-fg-basic-inverse: var(--color-neutral-950);
  --color-fg-basic-inverse-hover: var(--color-neutral-800);
  --color-fg-basic-inverse-disabled: var(--color-neutral-700);
  --color-border-basic-primary: var(--color-slate-700);
  --color-fg-brand-primary: var(--color-tolv-navy-50);
  --color-fg-brand-primary-hover: var(--color-tolv-navy-200);
  --color-fg-brand-primary-disabled: var(--color-neutral-700);
  --color-fg-brand-inverse: var(--color-tolv-navy-950);
  --color-fg-brand-inverse-hover: var(--color-tolv-navy-900);
  --color-fg-brand-inverse-disabled: var(--color-neutral-700);
  --color-fg-caution-primary: var(--color-red-400);
  --color-fg-caution-primary-hover: var(--color-red-600);
  --color-fg-caution-primary-disabled: var(--color-neutral-700);
  --color-bg-basic-primary: var(--color-black);
  --color-bg-basic-primary-hover: var(--color-neutral-950);
  --color-bg-basic-primary-disabled: var(--color-transparent);
  --color-bg-basic-inverse: var(--color-white);
  --color-bg-basic-inverse-hover: var(--color-neutral-50);
  --color-bg-basic-inverse-disabled: var(--color-transparent);
  --color-bg-brand-primary: var(--color-tolv-navy-50);
  --color-bg-brand-primary-hover: var(--color-tolv-navy-200);
  --color-bg-brand-primary-disabled: var(--color-transparent);
  --color-bg-brand-secondary: var(--color-tolv-navy-900);
  --color-bg-brand-secondary-hover: var(--color-tolv-navy-800);
  --color-bg-brand-secondary-disabled: var(--color-transparent);
  --color-bg-brand-tertiary: var(--color-black);
  --color-bg-brand-tertiary-hover: var(--color-tolv-navy-950);
  --color-bg-brand-tertiary-disabled: var(--color-transparent);
  --color-bg-caution-primary: var(--color-red-400);
  --color-bg-caution-primary-hover: var(--color-red-600);
  --color-bg-caution-primary-disabled: var(--color-transparent);
  --color-bg-caution-secondary: var(--color-red-900);
  --color-bg-caution-secondary-hover: var(--color-red-800);
  --color-bg-caution-secondary-disabled: var(--color-transparent);
  --color-bg-caution-tertiary: var(--color-black);
  --color-bg-caution-tertiary-hover: var(--color-red-950);
  --color-bg-caution-tertiary-disabled: var(--color-transparent);
  --color-border-basic-primary-hover: var(--color-slate-800);
  --color-border-basic-primary-disabled: var(--color-transparent);
  --color-border-basic-secondary: var(--color-slate-400);
  --color-border-basic-secondary-hover: var(--color-slate-500);
  --color-border-basic-secondary-disabled: var(--color-transparent);
  --color-border-brand-primary: var(--color-tolv-navy-700);
  --color-border-brand-primary-hover: var(--color-tolv-navy-800);
  --color-border-brand-primary-disabled: var(--color-transparent);
  --color-border-brand-secondary: var(--color-tolv-navy-400);
  --color-border-brand-secondary-hover: var(--color-tolv-navy-500);
  --color-border-brand-secondary-disabled: var(--color-transparent);
  --color-border-caution-primary: var(--color-red-400);
  --color-border-caution-primary-hover: var(--color-red-500);
  --color-border-caution-primary-disabled: var(--color-transparent);
}

/* ---- Light mode (manual override) ---- */
:root[data-theme="light"] {
  --color-fg-basic-primary: var(--color-neutral-950);
  --color-fg-basic-secondary: var(--color-neutral-600);
  --color-fg-basic-primary-hover: var(--color-neutral-800);
  --color-fg-basic-primary-disabled: var(--color-neutral-300);
  --color-fg-basic-secondary-hover: var(--color-neutral-500);
  --color-fg-basic-secondary-disabled: var(--color-neutral-300);
  --color-fg-basic-inverse: var(--color-neutral-50);
  --color-fg-basic-inverse-hover: var(--color-neutral-200);
  --color-fg-basic-inverse-disabled: var(--color-neutral-300);
  --color-border-basic-primary: var(--color-slate-300);
  --color-fg-brand-primary: var(--color-tolv-navy-950);
  --color-fg-brand-primary-hover: var(--color-tolv-navy-800);
  --color-fg-brand-primary-disabled: var(--color-neutral-300);
  --color-fg-brand-inverse: var(--color-tolv-navy-50);
  --color-fg-brand-inverse-hover: var(--color-tolv-navy-100);
  --color-fg-brand-inverse-disabled: var(--color-neutral-300);
  --color-fg-caution-primary: var(--color-red-600);
  --color-fg-caution-primary-hover: var(--color-red-400);
  --color-fg-caution-primary-disabled: var(--color-neutral-300);
  --color-bg-basic-primary: var(--color-white);
  --color-bg-basic-primary-hover: var(--color-neutral-50);
  --color-bg-basic-primary-disabled: var(--color-transparent);
  --color-bg-basic-inverse: var(--color-black);
  --color-bg-basic-inverse-hover: var(--color-neutral-950);
  --color-bg-basic-inverse-disabled: var(--color-transparent);
  --color-bg-brand-primary: var(--color-tolv-navy-950);
  --color-bg-brand-primary-hover: var(--color-tolv-navy-800);
  --color-bg-brand-primary-disabled: var(--color-transparent);
  --color-bg-brand-secondary: var(--color-tolv-navy-100);
  --color-bg-brand-secondary-hover: var(--color-tolv-navy-200);
  --color-bg-brand-secondary-disabled: var(--color-transparent);
  --color-bg-brand-tertiary: var(--color-white);
  --color-bg-brand-tertiary-hover: var(--color-tolv-navy-50);
  --color-bg-brand-tertiary-disabled: var(--color-transparent);
  --color-bg-caution-primary: var(--color-red-600);
  --color-bg-caution-primary-hover: var(--color-red-400);
  --color-bg-caution-primary-disabled: var(--color-transparent);
  --color-bg-caution-secondary: var(--color-red-100);
  --color-bg-caution-secondary-hover: var(--color-red-200);
  --color-bg-caution-secondary-disabled: var(--color-transparent);
  --color-bg-caution-tertiary: var(--color-white);
  --color-bg-caution-tertiary-hover: var(--color-red-50);
  --color-bg-caution-tertiary-disabled: var(--color-transparent);
  --color-border-basic-primary-hover: var(--color-slate-200);
  --color-border-basic-primary-disabled: var(--color-transparent);
  --color-border-basic-secondary: var(--color-slate-600);
  --color-border-basic-secondary-hover: var(--color-slate-500);
  --color-border-basic-secondary-disabled: var(--color-transparent);
  --color-border-brand-primary: var(--color-tolv-navy-300);
  --color-border-brand-primary-hover: var(--color-tolv-navy-200);
  --color-border-brand-primary-disabled: var(--color-transparent);
  --color-border-brand-secondary: var(--color-tolv-navy-600);
  --color-border-brand-secondary-hover: var(--color-tolv-navy-500);
  --color-border-brand-secondary-disabled: var(--color-transparent);
  --color-border-caution-primary: var(--color-red-600);
  --color-border-caution-primary-hover: var(--color-red-500);
  --color-border-caution-primary-disabled: var(--color-transparent);
}