/* Tolstoy Compose — current UI system tokens.
   One source of truth for the reduced editorial design language: shape, type,
   spacing, surfaces, controls, motion, viewport, and accessibility boundaries. */
@layer tokens {
  :root {
    color-scheme: light;

    --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Reduced type roles. Keep feature/component typography mapped through these roles. */
    --type-size-meta: 12px;
    --type-size-control: 14px;
    --type-size-body: 14px;
    --type-size-heading: 16px;
    --type-line-meta: 1.28;
    --type-line-control: 1.35;
    --type-line-body: 1.45;
    --type-line-heading: 1.22;
    --type-weight-regular: 400;
    --type-weight-strong: 600;

    --ui-font-size: var(--type-size-control);
    --ui-font-size-compact: var(--type-size-meta);
    --ui-line-height: var(--type-line-body);
    --ui-font-weight: var(--type-weight-regular);
    --ui-font-weight-strong: var(--type-weight-strong);
    --ui-field-font-size: var(--type-size-control);
    --ui-field-line-height: var(--type-line-control);
    --ui-field-font-weight: var(--type-weight-regular);

    --doc-body-font: 'Newsreader', Georgia, 'Times New Roman', serif;
    --doc-heading-font: 'Newsreader', Georgia, 'Times New Roman', serif;
    --doc-font-size: 18px;
    --doc-line-height: 1.74;
    --doc-paragraph-spacing: 0.85em;
    --doc-line-width: 680px;
    --doc-body-color: var(--doc-text);
    --doc-heading-color: var(--doc-text);
    --doc-h1-size: 2em;
    --doc-h2-size: 1.5em;
    --doc-h3-size: 1.25em;
    --doc-h4-size: 1.1em;
    --doc-h5-size: 1em;
    --doc-h6-size: .9em;

    --ed-body-font: var(--doc-body-font);
    --ed-heading-font: var(--doc-heading-font);
    --ed-font-size: var(--doc-font-size);
    --ed-line-height: var(--doc-line-height);
    --ed-paragraph-spacing: var(--doc-paragraph-spacing);
    --ed-line-width: var(--doc-line-width);
    --ed-body-color: var(--doc-body-color);
    --ed-heading-color: var(--doc-heading-color);
    --ed-h1-size: var(--doc-h1-size);
    --ed-h2-size: var(--doc-h2-size);
    --ed-h3-size: var(--doc-h3-size);
    --ed-h4-size: var(--doc-h4-size);
    --ed-h5-size: var(--doc-h5-size);
    --ed-h6-size: var(--doc-h6-size);

    /* Reduced spacing roles. Use calc() from these roles only when a larger
       layout boundary is required, rather than introducing another token. */
    --space-tight: 4px;
    --space-related: 8px;
    --space-cluster: 12px;
    --space-section: 16px;

    /* Reduced shape roles. Rounded rectangles are default; true pills are not
       a design-system token. Use percentages only for intrinsically circular
       marks such as status dots. */
    --shape-technical: 4px;
    --shape-control: 10px;
    --shape-card: 14px;
    --shape-panel: 18px;

    --topbar-h: 48px;
    --toolbar-h: 44px;

    --sidebar-min-w: 304px;
    --sidebar-ideal-w: 28vw;
    --sidebar-max-w: 384px;
    --sidebar-w: clamp(var(--sidebar-min-w), var(--sidebar-ideal-w), var(--sidebar-max-w));
    --sidebar-overlay-w: clamp(304px, 44vw, 380px);
    --sidebar-overlay-max-inline: calc(100vw - 64px);

    --app-viewport-inline: 100vw;
    --app-viewport-block: 100vh;
    --app-small-viewport-block: 100vh;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
    --app-shell-block-size: var(--app-viewport-block);
    --app-keyboard-safe-block: var(--app-small-viewport-block);
    --app-shell-inline-size: 100%;
    --app-editor-paper-min-block-size: calc(var(--app-small-viewport-block) - var(--topbar-h) - var(--toolbar-h) - 88px);

    --control-height: 32px;
    --small-control-height: 28px;
    --touch-target: 44px;
    --control-block-size: max(40px, var(--control-height));
    --control-touch-target: max(44px, var(--touch-target));
    --accessibility-hit-target-min: var(--touch-target);

    --surface-overlay-viewport-gap: var(--space-cluster);
    --surface-overlay-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - (2 * var(--surface-overlay-viewport-gap))), 72dvh);
    --surface-notice-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - var(--topbar-h) - var(--toolbar-h) - (4 * var(--space-cluster))), 520px);
    --surface-command-palette-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - 10dvh - (2 * var(--space-cluster))), 720px);
    --surface-modal-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - (2 * var(--space-section))), 720px);
    --surface-sheet-max-inline: 560px;
    --surface-sheet-max-block: min(calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - (2 * var(--space-section))), 640px);
    --sidebar-action-target: max(var(--control-height), 36px);
    --sidebar-coarse-action-target: var(--touch-target);

    /* Reduced motion roles. Future motion work should extend behaviour through
       these jobs rather than creating local duration/easing systems. */
    --motion-duration-micro: 110ms;
    --motion-duration-state: 140ms;
    --motion-duration-exit: 130ms;
    --motion-duration-surface: 170ms;
    --motion-duration-panel-sheet: 240ms;
    --motion-duration-reduced: 1ms;
    --motion-ease-standard: cubic-bezier(.2, 0, .2, 1);
    --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
    --motion-ease-in: cubic-bezier(.4, 0, 1, 1);
    --motion-ease-emphasized: cubic-bezier(.2, 0, 0, 1);
    --motion-distance-reveal: 6px;
    --motion-distance-surface: 10px;
    --motion-distance-sheet: 18px;
    --motion-scale-reveal: .985;
    --motion-scale-press: .968;

    --z-toolbar: 20;
    --z-topbar: 30;
    --z-overlay: 60;
    --z-sidebar: 70;
    --z-popover: 80;
    --z-modal: 90;
    --z-toast: 100;
    --z-tip: 110;

    --sidebar-sheet-snap-min: .42;
    --sidebar-sheet-snap-default: .72;
    --sidebar-sheet-snap-max: .92;
    --sidebar-sheet-closed-translate-y: 105%;
    --sidebar-sheet-closed-transform: translateY(var(--sidebar-sheet-closed-translate-y));
    --sidebar-sheet-closed-block-size: min(calc(var(--app-viewport-block) * var(--sidebar-sheet-snap-default)), 640px);
    --sidebar-sheet-open-transform: translateY(0);
    --sidebar-sheet-max-block-fraction: .92;
    --sidebar-sheet-drag-zone: 28px;
    --sidebar-sheet-motion-duration: var(--motion-duration-panel-sheet);
    --sidebar-sheet-motion-easing: var(--motion-ease-emphasized);

    /* Neutral editorial surfaces. These names are the single runtime source of
       truth; legacy bg aliases below exist only as current component semantics. */
    --surface-document-paper: #FAFAF7;
    --surface-document-paper-dark: #1E1C19;
    --surface-document-paper-border: color-mix(in srgb, var(--text) 8%, transparent);
    --surface-document-paper-border-focus: var(--surface-document-paper-border);
    --surface-document-paper-shadow: 0 1px 2px color-mix(in srgb, var(--text) 2.5%, transparent);
    --surface-document-paper-shadow-focus: var(--surface-document-paper-shadow);
    --surface-document-paper-edge-highlight: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
    --surface-app-ground: #F1F0ED;
    --surface-canvas: #F7F6F1;
    --surface-panel: #F7F6F3;
    --surface-card: #FEFDFB;
    --surface-field: color-mix(in srgb, var(--surface-card) 84%, var(--surface-panel) 16%);
    --surface-floating: color-mix(in srgb, var(--surface-card) 86%, transparent);
    --surface-floating-chrome: color-mix(in srgb, var(--surface-panel) 76%, var(--surface-app-ground) 24%);
    --surface-sidebar-shell: color-mix(in srgb, var(--surface-app-ground) 78%, var(--surface-panel) 22%);
    --surface-sidebar-shell-border: color-mix(in srgb, #111 7%, transparent);
    --surface-sidebar-shell-shadow: none;
    --surface-inspector-shell: var(--surface-sidebar-shell);
    --surface-inspector-shell-border: var(--surface-sidebar-shell-border);
    --surface-inspector-shell-shadow: var(--surface-sidebar-shell-shadow);
    --surface-notice: #F7F6F3;
    --surface-border: color-mix(in srgb, #111 10%, transparent);
    --surface-border-strong: color-mix(in srgb, #111 18%, transparent);
    --surface-filter-floating: blur(18px) saturate(1.08);

    --elevation-control: none;
    --elevation-floating: none;
    --elevation-soft: none;
    --elevation-panel: none;

    --text: #141412;
    --text-sec: #353431;
    --text-muted: #67645F;
    --text-disabled: #9A9791;

    --border: var(--surface-border);
    --border-strong: var(--surface-border-strong);
    --fill-muted: color-mix(in srgb, var(--surface-panel) 82%, var(--text) 3%);
    --fill-subtle: var(--fill-muted);

    /* Editorial accent roles. Accent palettes are restrained but intentional:
       active controls, selected rows, focus, caret, and small writing aids use
       these roles with enough chroma to read clearly, without changing the
       document-paper reading surface. */
    --accent-ink: #4A4844;
    --accent-rgb: 74, 72, 68;
    --accent: var(--accent-ink);
    --accent-soft: color-mix(in srgb, var(--accent-ink) 9%, var(--surface-panel) 91%);
    --accent-surface: color-mix(in srgb, var(--accent-ink) 11%, var(--surface-card) 89%);
    --accent-surface-hover: color-mix(in srgb, var(--accent-ink) 15%, var(--surface-card) 85%);
    --accent-surface-active: color-mix(in srgb, var(--accent-ink) 19%, var(--surface-card) 81%);
    --accent-border: color-mix(in srgb, var(--accent-ink) 26%, transparent);
    --accent-border-strong: color-mix(in srgb, var(--accent-ink) 42%, transparent);
    --accent-focus: color-mix(in srgb, var(--accent-ink) 86%, var(--text) 14%);
    --fill-active: var(--accent-surface-active);
    --danger: var(--text);

    --control-surface: color-mix(in srgb, var(--surface-card) 72%, transparent);
    --control-surface-hover: color-mix(in srgb, var(--surface-card) 94%, transparent);
    --control-surface-active: var(--accent-surface-active);
    --control-border: color-mix(in srgb, var(--border) 76%, transparent);
    --control-border-hover: color-mix(in srgb, var(--border-strong) 78%, transparent);
    --control-border-active: var(--accent-border-strong);

    /* Universal panel interior grammar. Sidebar cards, document details, and
       future small inspector surfaces should consume these roles before adding
       local component names. */
    --panel-card-bg: color-mix(in srgb, var(--surface-card) 30%, transparent);
    --panel-card-border: color-mix(in srgb, var(--text) 9%, transparent);
    --panel-card-border-hover: color-mix(in srgb, var(--text) 12%, transparent);
    --panel-row-bg: transparent;
    --panel-row-bg-hover: color-mix(in srgb, var(--surface-card) 42%, transparent);
    --panel-row-bg-active: var(--accent-surface);
    --panel-row-border: color-mix(in srgb, var(--text) 8%, transparent);
    --panel-row-border-hover: var(--accent-border);
    --panel-control-surface: color-mix(in srgb, var(--surface-card) 80%, var(--surface-panel) 20%);
    --panel-control-surface-hover: color-mix(in srgb, var(--surface-card) 92%, var(--surface-panel) 8%);
    --panel-control-surface-active: var(--accent-surface);
    --panel-control-border: var(--panel-card-border);
    --panel-control-border-hover: var(--panel-card-border-hover);

    --focus-ring-color: var(--accent-focus);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-radius: var(--shape-technical);
    --focus-ring-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 14%, transparent);
    --surface-focus-scroll-padding: calc(var(--focus-ring-width) + var(--focus-ring-offset) + var(--space-cluster));
    --surface-focus-scroll-padding-inline: calc(var(--focus-ring-width) + var(--focus-ring-offset) + var(--space-related));

    --scrollbar-track: transparent;
    --scrollbar-thumb: color-mix(in srgb, var(--text) 20%, transparent);

    --bg-app: var(--surface-app-ground);
    --bg-canvas: var(--surface-canvas);
    --bg-chrome: var(--surface-app-ground);
    --bg-card: var(--surface-card);
    --bg-surface: var(--surface-panel);
    --bg-overlay: var(--surface-panel);

    --doc-canvas: var(--surface-canvas);
    --doc-editor-bg: var(--surface-document-paper);
    --doc-text: var(--text);
    --doc-page: var(--surface-document-paper);
    --doc-page-dark: var(--surface-document-paper-dark);
    --doc-page-border: var(--surface-document-paper-border);
    --doc-page-border-focus: var(--surface-document-paper-border-focus);
    --doc-page-radius: calc(var(--shape-technical) + 4px);
    --doc-page-shadow: var(--surface-document-paper-shadow);
    --doc-page-shadow-focus: var(--surface-document-paper-shadow-focus);
    --doc-page-edge-highlight: var(--surface-document-paper-edge-highlight);
    --doc-highlight-bg: #FFF59D;
    --doc-highlight-text: #1A1917;
    --doc-highlight-text-dark: #EDE8E1;
    --doc-print-bg: #fff;
    --doc-print-text: #000;
    --doc-print-border: #ccc;
    --doc-print-muted: #333;
    --ed-bg: var(--doc-editor-bg);
    --page-paper: var(--doc-page);
    --page-paper-dark: var(--doc-page-dark);
  }


  :root[data-accent="grey"] {
    --accent-ink: #4A4844;
    --accent-rgb: 74, 72, 68;
  }

  :root[data-accent="blue-purple"] {
    --accent-ink: #515DA8;
    --accent-rgb: 81, 93, 168;
  }

  :root[data-accent="olive"] {
    --accent-ink: #667D35;
    --accent-rgb: 102, 125, 53;
  }

  :root[data-accent="yellow-orange"] {
    --accent-ink: #B56E22;
    --accent-rgb: 181, 110, 34;
  }

  :root[data-accent="maroon-red"] {
    --accent-ink: #963F4C;
    --accent-rgb: 150, 63, 76;
  }

  @supports (block-size: 100dvh) {
    :root { --app-viewport-block: 100dvh; }
  }

  @supports (block-size: 100svh) {
    :root { --app-small-viewport-block: 100svh; }
  }

  @supports (block-size: 100dvb) {
    :root { --app-keyboard-safe-block: 100dvb; }
  }

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