/** Shared semantic tokens. Light values remain the default palette. */
:root {
  color-scheme: light dark;

  /* Shared with Tailwind utilities through @theme inline. Keep literal
     design values here; consuming styles only reference these variables. */
  --color-cover-beige: light-dark(#f2e8dd, #483a2e);
  --color-cover-blue: light-dark(#e2ebf5, #2c4051);
  --color-cover-violet: light-dark(#e9e8f4, #39364c);
  --color-fg-secondary: light-dark(#3c4e63, #c7d3e1);
  --color-highlight-hover: #a4ceed;
  --color-on-primary-secondary: light-dark(#dbe1e7, #344557);
  --color-on-primary-subtle: light-dark(#c0cede, #44586c);
  --font-weight-heavy: 750;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-14: 14px;
  --radius-18: 18px;
  --radius-3: 3px;
  --radius-30: 30px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-7: 7px;
  --radius-9: 9px;
  --shadow-brand: 0 12px 40px
    color-mix(in srgb, var(--color-brand) 3%, transparent);
  --tracking-caption: 0.08em;
  --tracking-lockup: -0.8px;
  --tracking-lockup-label: 1.5px;
  --tracking-overline: 0.12em;
  --spacing: 0.25rem;
  --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;
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --tracking-label: 0.16em;
  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-base: 12px;
  --radius-2xl: 32px;
  --border-width: 1px;
  --text-code: 0.86em;
  --text-lockup-mark: 10px;
  --text-lockup-caption: 9px;
  --leading-feedback: 1.7;
  --leading-none: 1;
  --leading-lockup: 1.1;
  --transition-duration-fast: 150ms;
  --transition-duration-normal: 180ms;
  --transition-duration-slow: 250ms;
  --shadow-subtle: 0 3px 16px #01224505;
  --shadow-quiet: 0 8px 32px #01224503;
  --shadow-outline: inset 0 0 0 1px var(--color-brand);
  --spacing-paragraph: 1em;
  --spacing-list: 1.33em;

  --color-fg: light-dark(#1c2229, #e7edf4);
  --color-fg-muted: light-dark(#5f6b78, #abb8c8);
  --color-brand: light-dark(#2a2f36, #dce7f3);
  --color-on-primary: light-dark(#ffffff, #15202d);
  --color-on-primary-muted: light-dark(#dfe0e1, #344557);
  /* Keep source artwork and neutral Mermaid diagrams on their native paper. */
  --color-artwork-surface: #ffffff;
  --color-on-accent: #000000;
  --color-cover-ink: light-dark(#000000, #e7edf4);
  --color-cover-alt-ink: light-dark(#000000, #e7edf4);
  --color-cover-warm-ink: light-dark(#000000, #e7edf4);
  --color-cover-mint-ink: light-dark(#000000, #e7edf4);
  --color-cover-rose-ink: light-dark(#000000, #e7edf4);
  --color-brand-hover: light-dark(#393e44, #c5d8eb);
  --color-canvas: light-dark(#f6f8fa, #111820);
  --color-surface: light-dark(#ffffff, #1b2531);
  --color-border: light-dark(#dee3e8, #3e4e61);
  --color-border-strong: light-dark(#dee3e8, #62748a);
  --color-accent: light-dark(#2c6693, #94c9f0);
  --color-accent-hover: light-dark(#2c6693, #b6dcf5);
  --color-accent-soft: light-dark(#edf1f5, #24374a);
  --color-highlight: #b6dcf5;
  --color-cover: light-dark(#dfe9f1, #2c4051);
  --color-cover-alt: light-dark(#e5e4ef, #39364c);
  --color-cover-warm: light-dark(#f1e6d9, #483a2e);
  --color-cover-mint: light-dark(#dcefe1, #2b4236);
  --color-cover-rose: light-dark(#f1dee5, #49323e);
  --color-success: light-dark(#2a6b58, #85d5b7);
  --color-success-soft: light-dark(#eaf0ee, #203b33);
  --color-info: light-dark(#2c6693, #94c9f0);
  --color-info-soft: light-dark(#edf1f5, #24374a);
  --color-warning: light-dark(#8a5b17, #f1ca83);
  --color-warning-soft: light-dark(#fff0ca, #423722);
  --color-on-danger: light-dark(#ffffff, #301719);
  --color-danger: light-dark(#a63a34, #ffaaa4);
  --color-danger-soft: light-dark(#f8efef, #442b30);

  --shadow-sm: 0 12px 40px #01224508;
  --shadow-md: 0 14px 36px rgb(15 23 42 / 8%), 0 2px 8px rgb(15 23 42 / 4%);
  --shadow-float: 0 22px 64px rgb(15 43 80 / 14%);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Type scale. One ladder for the whole app: 12-28px for UI and body copy,
     then a 4px grid for page headings. Every font-size in app CSS and every
     Tailwind text-* utility resolves to one of these, so a size is chosen
     from the ladder instead of being invented per page (the pages used to
     carry 34 distinct values between 9px and 53px). */
  --text-xs: 12px;
  --text-ui: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-5xl: 36px;
  --text-6xl: 40px;
  --text-7xl: 44px;
  --text-8xl: 48px;
  --text-9xl: 52px;

  /* Line heights. Five steps for the whole app: display and headings, dense
     UI text, body copy, and long-form reading. Values at or below 1.2 are
     drawn lockups (a logo tile, a cover) and stay off the ladder. */
  --leading-display: 1.3;
  --leading-heading: 1.5;
  --leading-ui: 1.65;
  --leading-body: 1.8;
  --leading-reading: 2;

  /* OS fonts only: no web font download stands between the HTML and the
     first paint on mobile. Latin uses the platform UI face; Japanese uses
     Hiragino (Apple), Noto Sans CJK JP (Android) or Yu Gothic (Windows). */
  --font-display:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --font-body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

  --layout-max: 1240px;

  --focus-ring-color: var(--color-accent);
  --focus-ring-width: 3px;
  --focus-ring-offset: 4px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Text-entry controls share the tighter focus geometry of unified
   select-control, so a field ring looks the same whichever control it is.
   Geometry only: the border color of a focused or invalid field is decided
   in packages/ui/src/primitives/field-control.ts, which this rule would
   otherwise override (an unlayered rule beats every Tailwind utility). */
[data-slot="input"]:focus-visible,
[data-slot="textarea"]:focus-visible,
[data-slot="select"]:focus-visible {
  outline-width: calc(var(--spacing) * 0.5);
  outline-offset: calc(var(--spacing) * 0.5);
}

/* Must beat component-level animation/transition rules regardless of
   specificity, to respect the reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  * {
    /* biome-ignore lint/complexity/noImportantStyles: intentional, see comment above */
    animation-duration: 0.01ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: intentional, see comment above */
    animation-iteration-count: 1 !important;
    /* biome-ignore lint/complexity/noImportantStyles: intentional, see comment above */
    transition-duration: 0.01ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: intentional, see comment above */
    scroll-behavior: auto !important;
  }
}