:root {
    /* default tokens; overridden per variant + theme */
    --font-serif: 'Instrument Serif', 'Noto Serif JP', Georgia, serif;
    --font-ui:    'Geist', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
    --font-mono:  'Geist Mono', 'SF Mono', monospace;

    --canvas: #FAFAF7;
    --canvas-nav: rgba(250, 250, 247, 0.82);
    --bg: #F5F4EF;
    --ink: #141413;
    --ink-soft: #514F49;
    --ink-faint: #908C82;
    --card: #FFFFFF;
    --card-head: #F7F6F1;
    --border: #E8E6DE;
    --border-soft: #EFEDE6;
    --border-strong: #D5D2C8;
    --mute: #EEEDE6;
    --row-hi: #F3EFE4;
    --grid: #E8E6DE;
    --rel: #908C82;

    --accent: oklch(0.58 0.17 28);       /* 朱墨 */
    --on-accent: #FFFFFF;
    --panel: var(--card);
    --control: var(--mute);
    --control-hover: var(--row-hi);
    --focus: var(--accent);
  }

  /* ---- Variant A: Paper Studio ---- */
  [data-variant="A"] {
    --font-serif: 'Instrument Serif', 'Noto Serif JP', serif;
    --font-ui:    'Geist', 'Hiragino Sans', system-ui, sans-serif;
    --font-mono:  'Geist Mono', 'SF Mono', monospace;
    --accent: oklch(0.58 0.17 28);  /* 朱 */
  }
  [data-variant="A"][data-theme="dark"] {
    --canvas: #15140F;
    --canvas-nav: rgba(21, 20, 15, 0.82);
    --bg: #0E0D0A;
    --ink: #F1EFE8;
    --ink-soft: #B8B3A6;
    --ink-faint: #6F6B60;
    --card: #1C1B16;
    --card-head: #23211B;
    --border: #2B2924;
    --border-soft: #24221D;
    --border-strong: #3A382F;
    --mute: #25231D;
    --row-hi: #2A271E;
    --grid: #23211B;
    --rel: #57544B;
    --accent: oklch(0.72 0.16 32);
  }

  /* ---- Variant B: Precision Grid ---- */
  [data-variant="B"] {
    --font-serif: 'Inter', 'Geist', system-ui, sans-serif;
    --font-ui:    'Inter', 'Geist', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
    --font-mono:  'JetBrains Mono', 'Geist Mono', 'SF Mono', monospace;
    --accent: #0D99FF;
    --canvas: #F7F8FA;
    --canvas-nav: rgba(255, 255, 255, 0.92);
    --bg: #FFFFFF;
    --card: #FFFFFF;
    --card-head: #F7F7F8;
    --panel: #FFFFFF;
    --border: #E6E6E6;
    --border-soft: #F0F0F0;
    --border-strong: #C9CCD1;
    --mute: #F3F3F3;
    --control: #F5F5F5;
    --control-hover: #EAF4FF;
    --row-hi: #EAF4FF;
    --grid: #E4E7EB;
    --rel: #9AA0A6;
    --ink: #1E1E1E;
    --ink-soft: #50545A;
    --ink-faint: #8A8F98;
    --focus: #0D99FF;
  }
  [data-variant="B"][data-theme="dark"] {
    --canvas: #1F2023;
    --canvas-nav: rgba(43, 44, 48, 0.9);
    --bg: #191A1D;
    --ink: #F2F3F5;
    --ink-soft: #B8BCC6;
    --ink-faint: #777D89;
    --card: #2B2C30;
    --card-head: #303238;
    --panel: #2B2C30;
    --border: #3A3C42;
    --border-soft: #33353A;
    --border-strong: #535762;
    --mute: #34363B;
    --control: #35373D;
    --control-hover: #12324D;
    --row-hi: #12324D;
    --grid: #32343A;
    --rel: #6D7380;
    --accent: #0D99FF;
    --focus: #0D99FF;
  }

  /* ---- Variant C: Soft Neon ---- */
  [data-variant="C"] {
    --font-serif: 'Fraunces', 'Instrument Serif', serif;
    --font-ui:    'Geist', 'Hiragino Sans', system-ui, sans-serif;
    --font-mono:  'JetBrains Mono', 'Geist Mono', monospace;
    --accent: oklch(0.75 0.18 130);   /* ライム */
    --canvas: #FAFAF6;
    --canvas-nav: rgba(250, 250, 246, 0.82);
    --bg: #F2F1EC;
    --card: #FFFFFF;
    --card-head: #F8F7F1;
    --border: #E8E6DC;
    --border-soft: #EFEDE3;
    --border-strong: #D3D0C3;
    --mute: #EEEDE3;
    --row-hi: #F0F4DF;
    --grid: #E5E3D7;
    --rel: #7F8273;
    --ink: #131410;
    --ink-soft: #53554C;
    --ink-faint: #8D8F84;
    --on-accent: #131410;
  }
  [data-variant="C"][data-theme="dark"] {
    --canvas: #0F110C;
    --canvas-nav: rgba(15, 17, 12, 0.82);
    --bg: #090A07;
    --ink: #EEF0E6;
    --ink-soft: #ADB1A2;
    --ink-faint: #666A5C;
    --card: #181A14;
    --card-head: #1D1F18;
    --border: #272A20;
    --border-soft: #1E2019;
    --border-strong: #383C2E;
    --mute: #23261D;
    --row-hi: #2A2E1E;
    --grid: #1E2019;
    --rel: #4F5343;
    --accent: oklch(0.82 0.18 128);
    --on-accent: #131410;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
  body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
  button, input, textarea, select { font-family: inherit; }
  a { color: inherit; }

  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.6; }
  }

  /* page transition */
  .cevrio-page { animation: fade-up 360ms cubic-bezier(0.2, 0.9, 0.3, 1); }
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* hover: nav links */
  nav a:hover { color: var(--ink) !important; }

  /* scrollbar: tasteful */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }