/* Copy of Website/CreatorTool/Styles/tokens.css with identical values, so this page matches the
   creator workspace. Re-copy it when that file changes. Trimmed only: the font-preset block keeps
   the default (pingfang) stacks, because this page has no font picker.

   Every colour comes from the brand roles in Assets/brand-tokens.css (also a copy of
   Website/CreatorTool/Assets/brand-tokens.css). Theme: the top-bar switch saves light or dark and
   index.html sets <html data-theme> before first paint; light is the default and the OS colour
   scheme is ignored. brand-tokens.css still swaps its roles under `prefers-color-scheme: dark`,
   so the block below re-declares the scheme-dependent roles; `:root[data-theme]` is more specific
   than the brand's `:root`, so these values win in either OS scheme. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --fp-ground: var(--fp-color-paper);
  --fp-ground-alt: var(--fp-color-paper-2);
  --fp-front: var(--fp-color-ink);
  --fp-accent: var(--fp-color-copper);
  --fp-positive: var(--fp-color-teal);
  --fp-accent-ink: var(--fp-color-copper);
  --fp-mark-left-page: var(--fp-color-ink);
  --fp-mark-upper-leaf: var(--fp-color-copper);
  --fp-mark-lower-leaf: var(--fp-color-ink);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fp-ground: var(--fp-color-night);
  --fp-ground-alt: var(--fp-color-slate);
  --fp-front: var(--fp-color-paper-dark);
  --fp-accent: var(--fp-color-copper-dark);
  --fp-positive: var(--fp-color-teal-dark);
  --fp-accent-ink: var(--fp-color-copper-ink-dark);
  --fp-mark-left-page: var(--fp-color-paper-dark);
  --fp-mark-upper-leaf: var(--fp-color-copper-dark);
  --fp-mark-lower-leaf: var(--fp-color-slate);
}

:root {
  /* Surfaces */
  --color-page: var(--fp-ground);
  --color-surface: var(--fp-ground);
  --color-surface-2: var(--fp-ground-alt);
  --color-floating: color-mix(in srgb, var(--fp-ground) 94%, transparent);
  /* Text: front and its 85/62/55% composites over ground (#3F3C38, #716E6A, #807D7A in light) */
  --color-text: var(--fp-front);
  --color-text-2: color-mix(in srgb, var(--fp-front) 85%, var(--fp-ground));
  --color-text-muted: color-mix(in srgb, var(--fp-front) 62%, var(--fp-ground));
  --color-text-faint: color-mix(in srgb, var(--fp-front) 55%, var(--fp-ground));
  /* Lines and tints */
  --color-border: color-mix(in srgb, var(--fp-front) 12%, transparent);
  --color-border-strong: color-mix(in srgb, var(--fp-front) 16%, transparent);
  --color-border-dashed: color-mix(in srgb, var(--fp-front) 25%, transparent);
  --color-hover: color-mix(in srgb, var(--fp-front) 6%, transparent);
  --color-divider: color-mix(in srgb, var(--fp-front) 6%, transparent);
  /* Accent (copper): fill vs text/icon, per the brand accent / accent-ink split */
  --color-accent: var(--fp-accent);
  --color-accent-text: var(--fp-accent-ink);
  /* Copper fills that carry text or an icon (primary/danger buttons, number badges) pair
     --color-accent-fill with white --color-on-accent. The brand's ink-on-copper reaches only
     3.82:1 on light copper, and white on the dark theme's lifted copper only 3.00:1. So these
     fills keep the light copper in both themes, where white is 4.91:1. On night, copper is
     3.93:1, so the fill still reads as a control. Hover and active mix toward ink (5.97:1 and
     6.79:1). Paper (#F8F5F2) would sit at 4.52:1, so the foreground is plain white. */
  --color-accent-fill: var(--fp-color-copper);
  --color-accent-fill-hover: color-mix(in srgb, var(--fp-color-copper) 85%, var(--fp-color-ink));
  --color-accent-fill-active: color-mix(in srgb, var(--fp-color-copper) 75%, var(--fp-color-ink));
  --color-on-accent: #FFFFFF;
  --color-accent-tint: color-mix(in srgb, var(--fp-accent) 10%, transparent);
  --color-accent-badge: color-mix(in srgb, var(--fp-accent) 12%, transparent);
  --color-accent-range: color-mix(in srgb, var(--fp-accent) 45%, transparent);
  --color-accent-ring: color-mix(in srgb, var(--fp-accent) 45%, transparent);
  /* Attention / warning / error share the copper family and always carry an icon or text */
  --color-attention: var(--fp-accent-ink);
  --color-attention-tint: color-mix(in srgb, var(--fp-accent) 8%, transparent);
  /* Positive state (teal) */
  --color-positive: var(--fp-positive);
  --color-positive-tint: color-mix(in srgb, var(--fp-positive) 10%, transparent);
  --color-positive-border: color-mix(in srgb, var(--fp-positive) 45%, transparent);
  /* Kind badges (Styles/kinds.css): narration is a front tint, dialogue a front ring, choice
     and ending reuse the copper and teal tints. The ring also rules dialogue in the preview. */
  --color-kind-narration: color-mix(in srgb, var(--fp-front) 8%, transparent);
  --color-marker-ring: var(--color-text-muted);
  /* Points number (「n 點」): copper text deepened 20% towards the front so it keeps 4.5:1 on the
     copper and teal tints of selected rows and ending cards, not only on the plain surface. */
  --color-points: color-mix(in srgb, var(--fp-accent-ink) 80%, var(--fp-front));
  /* Inverse surfaces (selected graph card, phone route bar, toast, tooltips). Light mode puts
     paper-dark text and copper-ink-dark on ink; dark mode flips to an ink-on-paper-dark chip. */
  --color-inverse-surface: var(--fp-color-ink);
  --color-inverse-text: var(--fp-color-paper-dark);
  --color-inverse-muted: color-mix(in srgb, var(--fp-color-paper-dark) 75%, var(--fp-color-ink));
  --color-inverse-accent: var(--fp-color-copper-ink-dark);
  /* Selected chip / segmented thumb */
  --color-selected: var(--fp-front);
  --color-on-selected: var(--fp-ground);
  /* Graph canvas */
  --color-canvas: var(--fp-ground-alt);
  --color-canvas-dot: color-mix(in srgb, var(--fp-front) 10%, transparent);
  --color-edge: color-mix(in srgb, var(--fp-front) 30%, transparent);
  --color-edge-choice: color-mix(in srgb, var(--fp-accent) 55%, transparent);
  /* Elevation */
  --color-shadow: color-mix(in srgb, var(--fp-color-ink) 12%, transparent);
  --color-shadow-strong: color-mix(in srgb, var(--fp-color-ink) 18%, transparent);
  --color-backdrop: color-mix(in srgb, var(--fp-color-ink) 28%, transparent);
  --shadow-thumb: 0 1px 2px var(--color-shadow);
  --shadow-floating: 0 1px 3px var(--color-shadow);
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--fp-color-ink) 8%, transparent);
  --shadow-dock: 0 2px 8px var(--color-shadow-strong);
  --shadow-menu: 0 8px 28px var(--color-shadow-strong);
  --shadow-dialog: 0 12px 50px var(--color-shadow-strong);
  /* Typography: local brand stacks only, no web fonts */
  --font-ui: var(--fp-font-sans);
  --font-serif: var(--fp-font-serif);
  --font-mono: var(--fp-font-mono);
  /* The 「岔頁」 wordmark keeps the brand's own stack under every 字型 preset: a literal copy of
     --fp-font-serif in Assets/brand-tokens.css (the role .brand-name used before presets),
     because the presets re-declare --fp-font-serif itself. Declared here, outside the preset
     block, so no [data-font] rule touches it (Tests/brand-font.test.mjs). */
  --font-brand: 'Noto Serif TC','Source Han Serif TC','Songti TC',serif;
  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 17px;
  --font-size-2xl: 18px;
  --font-size-3xl: 22px;
  /* Spacing scale */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  /* Corner radius: 10–12px for controls and cards */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  /* Sizes */
  --topbar-height: 56px;
  --control-height: 40px;
  --touch-target: 44px;
  --bottom-nav-height: 64px;
  /* Stacking layers, lowest to highest */
  --z-canvas-ui: 3;
  --z-resizer: 4;
  --z-dock: 6;
  --z-topbar: 20;
  --z-drawer: 25;
  --z-menu: 30;
  --z-tooltip: 35;
  --z-toast: 40;
  --z-skip-link: 100;
}

:root[data-theme="dark"] {
  --color-floating: color-mix(in srgb, var(--fp-ground) 92%, transparent);
  --color-inverse-surface: var(--fp-color-paper-dark);
  --color-inverse-text: var(--fp-color-ink);
  --color-inverse-muted: color-mix(in srgb, var(--fp-color-ink) 75%, var(--fp-color-paper-dark));
  /* Copper text on paper-dark misses 4.5:1, so emphasis on the light chip uses ink. */
  --color-inverse-accent: var(--fp-color-ink);
  --color-shadow: color-mix(in srgb, var(--fp-color-night) 60%, transparent);
  --color-shadow-strong: color-mix(in srgb, var(--fp-color-night) 75%, transparent);
  --color-backdrop: color-mix(in srgb, var(--fp-color-night) 60%, transparent);
}

/* Theme-specific images (the logo marks): both are in the page, only the active one shows. */
:root:not([data-theme="dark"]) [data-theme-image="dark"],
:root[data-theme="dark"] [data-theme-image="light"] {
  display: none;
}

/* Default font preset of Website/CreatorTool (pingfang): local fonts only, no web fonts. */
:root {
  --fp-font-sans: 'PingFang TC','Noto Sans TC','Source Han Sans TC','Microsoft JhengHei','Heiti TC',system-ui,sans-serif;
  --fp-font-serif: 'PingFang TC','Noto Sans TC','Source Han Sans TC','Microsoft JhengHei','Heiti TC',system-ui,sans-serif;
}