/* Global design tokens — density, type scale, base reset.
   Applied via .app class; all artboards inherit these. */

:root {
  /* Density (default = comfortable) */
  --d-row-h: 56px;
  --d-pad-cell: 14px 16px;
  --d-pad-card: 22px;
  --d-pad-section: 28px;
  --d-gap-stack: 16px;
  --d-thumb: 48px;
  --d-thumb-h: 67px;
  --d-sidebar-w: 232px;
  --d-font-base: 14px;

  /* Type scale */
  --t-display: 2.25rem;
  --t-h1: 1.625rem;
  --t-h2: 1.125rem;
  --t-h3: 0.95rem;
  --t-body: 0.875rem;
  --t-meta: 0.78rem;
  --t-overline: 0.68rem;
}

:root[data-density="compact"] {
  --d-row-h: 44px;
  --d-pad-cell: 8px 12px;
  --d-pad-card: 16px;
  --d-pad-section: 20px;
  --d-gap-stack: 10px;
  --d-thumb: 36px;
  --d-thumb-h: 50px;
  --d-font-base: 13px;
}
:root[data-density="spacious"] {
  --d-row-h: 68px;
  --d-pad-cell: 18px 20px;
  --d-pad-card: 28px;
  --d-pad-section: 36px;
  --d-gap-stack: 22px;
  --d-thumb: 58px;
  --d-thumb-h: 80px;
  --d-font-base: 15px;
}

:root[data-thumb="sm"] { --d-thumb: 32px; --d-thumb-h: 44px; }
:root[data-thumb="md"] { --d-thumb: 48px; --d-thumb-h: 67px; }
:root[data-thumb="lg"] { --d-thumb: 72px; --d-thumb-h: 100px; }
:root[data-sidebar="collapsed"] { --d-sidebar-w: 64px; }

.app, .app * { box-sizing: border-box; }
.app {
  font-size: var(--d-font-base);
}
.app button, .app input, .app textarea, .app select {
  font: inherit;
  color: inherit;
}

.tnum { font-variant-numeric: tabular-nums; }

/* V3 colour + surface semantic tokens (body.v3) */
/* ===== V3 colour tokens ===== */
body.v3 {
    margin: 0;
    padding: 0;

    --bg: #07070d;
    --bg-2: #0e0e18;
    --bg-3: #161724;
    --bg-4: #1e2032;
    --bg-input: #0a0b14;
    --bg-sidebar: #050509;
    --border: rgba(255, 255, 255, 0.04);
    --border-2: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);

    --fg: #ffffff;
    --fg-2: rgba(255, 255, 255, 0.72);
    --fg-3: rgba(255, 255, 255, 0.45);
    --fg-4: rgba(255, 255, 255, 0.28);

    --accent: #c084fc;
    --accent-2: #d8b4fe;
    --accent-soft: rgba(192, 132, 252, 0.13);
    --accent-line: rgba(192, 132, 252, 0.35);
    --accent-glow:
        0 0 30px rgba(192, 132, 252, 0.35), 0 0 60px rgba(192, 132, 252, 0.15);

    /* Mana semantic colours */
    --w: #fff8d3;
    --u: #aae0fa;
    --b: #cbc2bf;
    --r: #f9aa8f;
    --g: #9bd3ae;

    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, 0.13);
    --warn: #fbbf24;
    --warn-soft: rgba(251, 191, 36, 0.13);
    --danger: #fb7185;
    --danger-soft: rgba(251, 113, 133, 0.13);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.13);

    --holo: linear-gradient(
        120deg,
        #c084fc 0%,
        #22d3ee 25%,
        #60a5fa 50%,
        #34d399 75%,
        #c084fc 100%
    );

    /* Public header + sidebar brand + topbar: same horizontal inset (logo alignment) */
    --d-brand-pad-x: 22px;

    background: var(--bg);
    color: var(--fg);
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        system-ui,
        sans-serif;
    font-size: var(--d-font-base, 14px);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

/* Accent overrides (default body.v3 = violet) */
body.v3[data-accent="orange"] {
    --accent: #ff7a45;
    --accent-2: #ffa57a;
    --accent-soft: rgba(255, 122, 69, 0.13);
    --accent-line: rgba(255, 122, 69, 0.35);
    --accent-glow:
        0 0 30px rgba(255, 122, 69, 0.35), 0 0 60px rgba(255, 122, 69, 0.15);
}
body.v3[data-accent="violet"] {
    --accent: #c084fc;
    --accent-2: #d8b4fe;
    --accent-soft: rgba(192, 132, 252, 0.13);
    --accent-line: rgba(192, 132, 252, 0.35);
    --accent-glow:
        0 0 30px rgba(192, 132, 252, 0.35), 0 0 60px rgba(192, 132, 252, 0.15);
}
body.v3[data-accent="emerald"] {
    --accent: #34d399;
    --accent-2: #6ee7b7;
    --accent-soft: rgba(52, 211, 153, 0.13);
    --accent-line: rgba(52, 211, 153, 0.35);
    --accent-glow:
        0 0 30px rgba(52, 211, 153, 0.35), 0 0 60px rgba(52, 211, 153, 0.15);
}
body.v3[data-accent="cyan"] {
    --accent: #22d3ee;
    --accent-2: #67e8f9;
    --accent-soft: rgba(34, 211, 238, 0.13);
    --accent-line: rgba(34, 211, 238, 0.35);
    --accent-glow:
        0 0 30px rgba(34, 211, 238, 0.35), 0 0 60px rgba(34, 211, 238, 0.15);
}
body.v3[data-accent="amber"] {
    --accent: #fbbf24;
    --accent-2: #fcd34d;
    --accent-soft: rgba(251, 191, 36, 0.13);
    --accent-line: rgba(251, 191, 36, 0.35);
    --accent-glow:
        0 0 30px rgba(251, 191, 36, 0.35), 0 0 60px rgba(251, 191, 36, 0.15);
}

/* Light mode */
body.v3[data-mode="light"] {
    --bg: #ece9e0;
    --bg-2: #f8f5ec;
    --bg-3: #e3dfd2;
    --bg-4: #d4cfbf;
    --bg-input: #fffdf6;
    --bg-sidebar: #d8d3c2;
    --border: rgba(20, 15, 5, 0.1);
    --border-2: rgba(20, 15, 5, 0.15);
    --border-strong: rgba(20, 15, 5, 0.25);
    --fg: #1a140a;
    --fg-2: #4a3f2c;
    --fg-3: #786a52;
    --fg-4: #a89878;
}