/* ==========================================================================
   Story Craft Workbench — Unified Design Tokens
   Hybrid Direction: Warm Manuscript Paper & Darkhouse + Cut Header Bar
   Shared across Astro editorial pages (src/) and standalone tools (public/apps/).
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope/manrope-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* Font stacks (self-hosted + CJK/JP system fallbacks; zero external CDN) */
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Noto Serif JP", "Songti SC", "SimSun", Georgia, serif;
  --font-sans: "Manrope", "Noto Sans SC", "Source Han Sans SC", "Noto Sans JP", "PingFang SC", "Hiragino Sans GB", "Hiragino Kaku Gothic ProN", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Source Code Pro", monospace;

  /* Locked typography ladder (14 / 16 / 18 / 30px + 60px homepage quote display) */
  --text-sm: 0.875rem;
  --lh-sm: 1.25rem;
  --text-base: 1rem;
  --lh-base: 1.5rem;
  --text-lg: 1.125rem;
  --lh-lg: 1.75rem;
  --text-2xl: 1.875rem;
  --lh-2xl: 2.25rem;
  --text-hero: clamp(1.75rem, 1rem + 3.2vw, 3.75rem);

  /* Reading line-heights and measures */
  --lh-prose-zh: 1.8;
  --lh-prose-en: 1.65;
  --measure-prose-zh: 42em;
  --measure-prose: 65ch;
  --measure-heading: 680px;
  --container-max: 1240px;

  /* Locked spacing ladder (0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96px) */
  --sp-0: 0px;
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;

  /* Geometry: 0.5px hairlines & concentric radii (r = R - d = 6 - 4 = 2px) */
  --hairline: 0.5px;
  --r-outer: 6px;
  --r-inner: 2px;

  /* Z-index ladder */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-popover: 40;
  --z-drawer: 50;

  /* Motion tokens (AGENTS.md 6.6: transform & opacity only, <= 500ms) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-scene: 220ms;
  --motion-fast: 220ms var(--ease-out);
  --motion-base: 320ms var(--ease-out);
  --motion-slow: 480ms var(--ease-out);

  /* Density tier: reading (default spacious prompt-book shell) */
  --density-page-py: var(--sp-32);
  --density-section-gap: var(--sp-48);
  --density-panel-pad: var(--sp-24);
  --density-row-py: var(--sp-16);
  --density-header-py: var(--sp-12);
  --appbar-min-h: 40px;

  /* Radix Sand 1-12 Light (Unbleached Warm Manuscript Paper) */
  --sand-1-l: #fdfdfc;
  --sand-2-l: #f9f9f8;
  --sand-3-l: #f1f0ef;
  --sand-4-l: #e9e8e6;
  --sand-5-l: #e2e1de;
  --sand-6-l: #dad9d6;
  --sand-7-l: #cfceca;
  --sand-8-l: #bcbbb5;
  --sand-9-l: #8d8d86;
  --sand-10-l: #82827c;
  --sand-11-l: #63635e;
  --sand-12-l: #21201c;

  /* Radix Sand 1-12 Dark (Theater House Black) */
  --sand-1-d: #111110;
  --sand-2-d: #191918;
  --sand-3-d: #222221;
  --sand-4-d: #2a2a28;
  --sand-5-d: #31312e;
  --sand-6-d: #3b3a37;
  --sand-7-d: #494844;
  --sand-8-d: #62605b;
  --sand-9-d: #6f6d66;
  --sand-10-d: #7c7b74;
  --sand-11-d: #b5b3ad;
  --sand-12-d: #eeeeec;

  /* Single Primary Interactive Voice: Burnished Umber (Light) / Stage Tungsten (Dark) */
  --umber-9-l: #7c4316;
  --umber-10-l: #633410;
  --umber-soft-l: #f5ece3;
  --umber-ink-l: #fdfdfc;

  --tungsten-9-d: #dfa55d;
  --tungsten-10-d: #eab879;
  --tungsten-soft-d: #281f15;
  --tungsten-ink-d: #14110e;

  /* Three-Stage Pipeline Coordinates (WCAG AA >= 6.3:1 in Light & Dark)
     Stage 01: Goldenrod (Planning) / Stage 02: Blue (Plotting) / Stage 03: Green (Scene Writing) */
  --act-1-l: #754f12;
  --act-1-bg-l: #f6efe0;
  --act-1-bd-l: #d9c498;
  --act-2-l: #1c546e;
  --act-2-bg-l: #e6eff4;
  --act-2-bd-l: #b4cfde;
  --act-3-l: #1c614f;
  --act-3-bg-l: #e5f1ed;
  --act-3-bd-l: #b0d2c8;

  --act-1-d: #dfb66c;
  --act-1-bg-d: #251f14;
  --act-1-bd-d: #574525;
  --act-2-d: #7ec0df;
  --act-2-bg-d: #152229;
  --act-2-bd-d: #2b4a5b;
  --act-3-d: #6fc4ad;
  --act-3-bg-d: #142520;
  --act-3-bd-d: #284d42;

  /* Semantic Pitfall / Act Cutline / Inline Error Tokens (WCAG AA >= 6.0:1) */
  --danger-l: #942b23;
  --danger-soft-l: #f6ebe9;
  --danger-border-l: #dfc2be;

  --danger-d: #e5857b;
  --danger-soft-d: #291a19;
  --danger-border-d: #5c3532;

  /* Search Match Highlight */
  --mark-bg-l: #f2e3b6;
  --mark-bg-d: #3a3118;

  /* Resolved semantic tokens (Light fallback for pre-light-dark browsers) */
  --bg-canvas: var(--sand-1-l);
  --bg-subtle: var(--sand-2-l);
  --bg-surface: var(--sand-3-l);
  --bg-hover: var(--sand-4-l);
  --bg-active: var(--sand-5-l);
  --border-subtle: var(--sand-6-l);
  --border-strong: var(--sand-7-l);
  --border-focus: var(--sand-8-l);
  --text-muted: var(--sand-11-l);
  --text-primary: var(--sand-12-l);
  --accent: var(--umber-9-l);
  --accent-hover: var(--umber-10-l);
  --accent-soft: var(--umber-soft-l);
  --accent-ink: var(--umber-ink-l);

  --act-1: var(--act-1-l);
  --act-1-bg: var(--act-1-bg-l);
  --act-1-border: var(--act-1-bd-l);
  --act-2: var(--act-2-l);
  --act-2-bg: var(--act-2-bg-l);
  --act-2-border: var(--act-2-bd-l);
  --act-3: var(--act-3-l);
  --act-3-bg: var(--act-3-bg-l);
  --act-3-border: var(--act-3-bd-l);

  /* Alias stage-* tokens directly to Three-Act Revision tokens for Master Map & Apps */
  --stage-plan: var(--act-1);
  --stage-plan-bg: var(--act-1-bg);
  --stage-plan-border: var(--act-1-border);
  --stage-plot: var(--act-2);
  --stage-plot-bg: var(--act-2-bg);
  --stage-plot-border: var(--act-2-border);
  --stage-write: var(--act-3);
  --stage-write-bg: var(--act-3-bg);
  --stage-write-border: var(--act-3-border);

  --danger: var(--danger-l);
  --danger-soft: var(--danger-soft-l);
  --danger-border: var(--danger-border-l);
  --mark-bg: var(--mark-bg-l);
}

/* Map <meta name="color-scheme"> override back to CSS color-scheme */
:root:has(> head > meta[name="color-scheme"][content="dark"]),
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root:has(> head > meta[name="color-scheme"][content="light"]),
:root[data-theme="light"] {
  color-scheme: light;
}

/* Fallback for browsers without CSS light-dark() */
@media (prefers-color-scheme: dark) {
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])):not([data-theme="light"]) {
    --bg-canvas: var(--sand-1-d);
    --bg-subtle: var(--sand-2-d);
    --bg-surface: var(--sand-3-d);
    --bg-hover: var(--sand-4-d);
    --bg-active: var(--sand-5-d);
    --border-subtle: var(--sand-6-d);
    --border-strong: var(--sand-7-d);
    --border-focus: var(--sand-8-d);
    --text-muted: var(--sand-11-d);
    --text-primary: var(--sand-12-d);
    --accent: var(--tungsten-9-d);
    --accent-hover: var(--tungsten-10-d);
    --accent-soft: var(--tungsten-soft-d);
    --accent-ink: var(--tungsten-ink-d);
    --act-1: var(--act-1-d);
    --act-1-bg: var(--act-1-bg-d);
    --act-1-border: var(--act-1-bd-d);
    --act-2: var(--act-2-d);
    --act-2-bg: var(--act-2-bg-d);
    --act-2-border: var(--act-2-bd-d);
    --act-3: var(--act-3-d);
    --act-3-bg: var(--act-3-bg-d);
    --act-3-border: var(--act-3-bd-d);
    --danger: var(--danger-d);
    --danger-soft: var(--danger-soft-d);
    --danger-border: var(--danger-border-d);
    --mark-bg: var(--mark-bg-d);
  }
}

:root:has(> head > meta[name="color-scheme"][content="dark"]),
:root[data-theme="dark"] {
  --bg-canvas: var(--sand-1-d);
  --bg-subtle: var(--sand-2-d);
  --bg-surface: var(--sand-3-d);
  --bg-hover: var(--sand-4-d);
  --bg-active: var(--sand-5-d);
  --border-subtle: var(--sand-6-d);
  --border-strong: var(--sand-7-d);
  --border-focus: var(--sand-8-d);
  --text-muted: var(--sand-11-d);
  --text-primary: var(--sand-12-d);
  --accent: var(--tungsten-9-d);
  --accent-hover: var(--tungsten-10-d);
  --accent-soft: var(--tungsten-soft-d);
  --accent-ink: var(--tungsten-ink-d);
  --act-1: var(--act-1-d);
  --act-1-bg: var(--act-1-bg-d);
  --act-1-border: var(--act-1-bd-d);
  --act-2: var(--act-2-d);
  --act-2-bg: var(--act-2-bg-d);
  --act-2-border: var(--act-2-bd-d);
  --act-3: var(--act-3-d);
  --act-3-bg: var(--act-3-bg-d);
  --act-3-border: var(--act-3-bd-d);
  --danger: var(--danger-d);
  --danger-soft: var(--danger-soft-d);
  --danger-border: var(--danger-border-d);
  --mark-bg: var(--mark-bg-d);
}

@supports (color: light-dark(white, black)) {
  :root {
    --bg-canvas: light-dark(var(--sand-1-l), var(--sand-1-d));
    --bg-subtle: light-dark(var(--sand-2-l), var(--sand-2-d));
    --bg-surface: light-dark(var(--sand-3-l), var(--sand-3-d));
    --bg-hover: light-dark(var(--sand-4-l), var(--sand-4-d));
    --bg-active: light-dark(var(--sand-5-l), var(--sand-5-d));
    --border-subtle: light-dark(var(--sand-6-l), var(--sand-6-d));
    --border-strong: light-dark(var(--sand-7-l), var(--sand-7-d));
    --border-focus: light-dark(var(--sand-8-l), var(--sand-8-d));
    --text-muted: light-dark(var(--sand-11-l), var(--sand-11-d));
    --text-primary: light-dark(var(--sand-12-l), var(--sand-12-d));
    --accent: light-dark(var(--umber-9-l), var(--tungsten-9-d));
    --accent-hover: light-dark(var(--umber-10-l), var(--tungsten-10-d));
    --accent-soft: light-dark(var(--umber-soft-l), var(--tungsten-soft-d));
    --accent-ink: light-dark(var(--umber-ink-l), var(--tungsten-ink-d));
    --act-1: light-dark(var(--act-1-l), var(--act-1-d));
    --act-1-bg: light-dark(var(--act-1-bg-l), var(--act-1-bg-d));
    --act-1-border: light-dark(var(--act-1-bd-l), var(--act-1-bd-d));
    --act-2: light-dark(var(--act-2-l), var(--act-2-d));
    --act-2-bg: light-dark(var(--act-2-bg-l), var(--act-2-bg-d));
    --act-2-border: light-dark(var(--act-2-bd-l), var(--act-2-bd-d));
    --act-3: light-dark(var(--act-3-l), var(--act-3-d));
    --act-3-bg: light-dark(var(--act-3-bg-l), var(--act-3-bg-d));
    --act-3-border: light-dark(var(--act-3-bd-l), var(--act-3-bd-d));
    --danger: light-dark(var(--danger-l), var(--danger-d));
    --danger-soft: light-dark(var(--danger-soft-l), var(--danger-soft-d));
    --danger-border: light-dark(var(--danger-border-l), var(--danger-border-d));
    --mark-bg: light-dark(var(--mark-bg-l), var(--mark-bg-d));
  }
}

/* Density tier: compact (standalone /apps/<tool>/ workbenches) */
[data-density="compact"] {
  --density-page-py: var(--sp-16);
  --density-section-gap: var(--sp-24);
  --density-panel-pad: var(--sp-12);
  --density-row-py: var(--sp-8);
  --density-header-py: var(--sp-8);
}

/* Windows High Contrast / Forced Colors Mode safety */
@media (forced-colors: active) {
  :root {
    --bg-canvas: Canvas;
    --bg-subtle: Canvas;
    --bg-surface: Canvas;
    --border-subtle: CanvasText;
    --border-strong: CanvasText;
    --border-focus: Highlight;
    --text-muted: GrayText;
    --text-primary: CanvasText;
    --accent: Highlight;
    --accent-ink: HighlightText;
    --act-1: CanvasText;
    --act-1-bg: Canvas;
    --act-1-border: CanvasText;
    --act-2: CanvasText;
    --act-2-bg: Canvas;
    --act-2-border: CanvasText;
    --act-3: CanvasText;
    --act-3-bg: Canvas;
    --act-3-border: CanvasText;
    --danger: LinkText;
    --danger-border: CanvasText;
  }
}

/* Reduced motion safety: preserve subtle non-spatial color transitions, zero longer reveals */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-scene: 0ms;
    --motion-fast: 150ms linear;
    --motion-base: 0ms linear;
    --motion-slow: 0ms linear;
  }
}

/* Cross-document scene transitions (AGENTS.md 6.6 & modern-web-guidance: cross-document-transitions) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--motion-scene);
    animation-timing-function: var(--ease-out);
  }

  ::view-transition-group(site-chrome-top),
  ::view-transition-old(site-chrome-top),
  ::view-transition-new(site-chrome-top),
  ::view-transition-group(site-chrome-bottom),
  ::view-transition-old(site-chrome-bottom),
  ::view-transition-new(site-chrome-bottom) {
    animation-duration: var(--motion-scene);
    animation-timing-function: var(--ease-out);
  }
}

/* Browser surface defaults (modern-web-guidance: browser-ui-theming & dark-mode) */
html {
  accent-color: var(--accent);
  scrollbar-width: auto;
  scrollbar-color: var(--border-focus) var(--bg-subtle);
  font-variant-numeric: tabular-nums;
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--border-focus);
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-subtle);
  }
}

::selection {
  background-color: var(--accent-soft);
  color: var(--text-primary);
}