/* ==========================================================================
   Unslop design system — tokens
   --------------------------------------------------------------------------
   Components read semantic tokens only. A theme is nothing but a different
   set of values for the same names: light (Ink & Vermilion) on :root, dark
   (Night) on [data-theme="dark"]. Two voices: --font-text for anything the
   writer wrote, --font-ui for everything the app says.
   See public/design-system/README.md for usage rules.
   ========================================================================== */

:root {
  /* ── Type: the instrument's voice ── */
  --font-ui: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-micro: 0.6875rem;   /* 11 · uppercase labels, badges */
  --text-meta: 0.75rem;      /* 12 · metadata, tooltips, captions */
  --text-ui: 0.8125rem;      /* 13 · default control and panel text */
  --text-ui-lg: 0.9375rem;   /* 15 · panel titles */
  --text-title: 1.25rem;     /* 20 · section headings */
  --text-display: 1.75rem;   /* 28 · page headings */
  --leading-ui: 1.45;
  --tracking-caps: 0.07em;

  /* ── Type: the red pen's hand, for markup notes in a draft's margin ── */
  --font-hand: "Nanum Pen Script", "Bradley Hand", "Segoe Print", cursive;
  --text-hand: 1.3125rem;    /* 21 · the hand runs small, so its notes sit a size up */

  /* ── Type: the writer's voice (default face; see [data-write] below) ── */
  --font-text: "adobe-caslon-pro", Georgia, serif;
  --write-scale: 1;
  --write-strike-y: 0.79em;   /* through the x-height, measured per face */
  --write-under-y: 1.12em;    /* just under the baseline */
  --write-heading-weight: 600;   /* title, h2, h3 */
  --write-h1-weight: 700;

  /* ── Space (4pt) ── */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Shape: bevel (chosen 2026-10-02). Circles stay circles. ── */
  --corner-shape: bevel;
  --radius-xs: 2px;          /* kbd, tiny chips */
  --radius-sm: 4px;          /* buttons, fields, chips, tool buttons */
  --radius-md: 5px;          /* popovers, menus, toolbars, wells */
  --radius-lg: 7px;          /* rail, flyouts, panels, dialogs, toasts */
  --radius-full: 999px;      /* dots and pins only */
  --control-h: 32px;
  --control-h-sm: 28px;

  /* ── Icons ── */
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-stroke: 1.6;

  /* ── Motion: three easings, five durations ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reflow: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* the text-modification reflow; timing lives in style.css + script.js */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reflow: 600ms;

  /* ── Layers (new surfaces; legacy z-indexes are left as they are) ── */
  --z-status: 11; /* above the editor wrapper (z-10), so a message's action stays clickable where the column overlaps the status line */
  --z-rail: 10;
  --z-popover: 1000;
  --z-dialog: 2000;
  --z-toast: 10000;

  /* ── Paper grain: the editor's own 100px tile ── */
  --paper-texture: url("/newtexture.webp?v=fc24b6b65d21");
  --paper-texture-size: 100px 100px;
}

/* ==========================================================================
   LIGHT — Ink & Vermilion (default)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-canvas: oklch(0.982 0.005 85);
  --bg-surface: oklch(0.995 0.0025 85);
  --bg-sunken: oklch(0.962 0.005 85);
  --bg-hover: oklch(0.945 0.006 85);
  --bg-active: oklch(0.915 0.008 85);
  --bg-inverse: oklch(0.235 0.012 65);

  --border-subtle: oklch(0.918 0.006 85);
  --border-default: oklch(0.86 0.008 85);
  --border-strong: oklch(0.72 0.01 80);

  --fg-default: oklch(0.235 0.012 65);
  --fg-muted: oklch(0.47 0.012 65);
  --fg-subtle: oklch(0.6 0.01 65);
  --fg-disabled: oklch(0.75 0.008 65);
  --fg-inverse: oklch(0.982 0.005 85);
  --icon-default: oklch(0.36 0.012 65);

  --text-ink: oklch(0.2 0.012 60);   /* the writer's words; in the editor, ink.js sets it to the chosen ink ([data-ink]) */
  --text-ink-placeholder: oklch(0.62 0.01 65);

  --accent: oklch(0.585 0.19 33);
  --accent-hover: oklch(0.53 0.18 33);
  --accent-subtle: oklch(0.955 0.025 40);
  --accent-fg: oklch(0.5 0.17 33);
  --on-accent: oklch(0.995 0.0025 85);

  --primary-bg: oklch(0.235 0.012 65);
  --pencil-on-primary: oklch(0.74 0.15 38); /* the red pencil on an ink button */
  --primary-hover: oklch(0.33 0.012 65);
  --primary-fg: oklch(0.982 0.005 85);

  --selection: oklch(0.62 0.17 35 / 0.18);

  --success: oklch(0.55 0.11 150);
  --success-subtle: oklch(0.95 0.03 150);
  --warning: oklch(0.68 0.13 75);
  --warning-subtle: oklch(0.96 0.04 85);
  --danger: oklch(0.52 0.19 25);
  --danger-subtle: oklch(0.955 0.025 25);

  /* Illustration inks: riso colours for drawings, such as the login page's
     doodles. Never for controls, text or marks. */
  --doodle-ink: oklch(0.24 0.014 60);
  --doodle-red: oklch(0.67 0.18 30);
  --doodle-yellow: oklch(0.88 0.15 92);
  --doodle-pink: oklch(0.76 0.15 355);
  --doodle-blue: oklch(0.63 0.14 258);
  --doodle-teal: oklch(0.78 0.11 192);
  --doodle-green: oklch(0.8 0.13 148);
  --doodle-blend: multiply; /* inks overprint the paper */

  /* Heat: the rhythm window's margin brackets, in riso inks from blue (leave
     the paragraph as it is) to red (revising it would do most for the score).
     Mustafa's call, 2026-10-03. Only for those marks; never controls or text. */
  --heat-0: oklch(0.6 0.13 258);
  --heat-1: oklch(0.66 0.11 205);
  --heat-2: oklch(0.64 0.14 150);
  --heat-3: oklch(0.76 0.15 88);
  --heat-4: oklch(0.68 0.17 55);
  --heat-5: oklch(0.58 0.2 28);
  /* Markup ink overprints the paper by day, like the doodles' riso inks */
  --markup-blend: multiply;

  /* An empty choice box, sketched in graphite; the red pencil ticks it when chosen */
  --mark-check-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M1.2 2.6C6 2.1 11 2.3 16.6 1.9M15.7 1.2C16.1 6 15.9 11 16.3 16.6M16.8 15.6C11.6 16.1 6.6 15.8 1.4 16.2M2.4 16.8C2.1 11.6 2.3 6.6 1.9 1.3' fill='none' stroke='oklch(0.6 0.01 65)' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Writer's marks inside the text */
  --mark-highlight: oklch(0.91 0.1 92 / 0.85);       /* the visual highlighter */
  --mark-key-phrase: oklch(0.6 0.17 35 / 0.14);      /* phrases picked for Modify */
  --mark-key-phrase-line: oklch(0.585 0.19 33 / 0.55);
  --mark-insert-line: var(--accent);                 /* proposed text */
  --mark-insert-ink: oklch(0.5 0.012 255);           /* proposed text is graphite until accepted */
  --mark-insert-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3.1'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23t)'/%3E%3C/svg%3E");  /* a mask: the paper's tooth showing through graphite */
  --mark-delete: var(--fg-subtle);                   /* struck original */
  --mark-ghost: oklch(0.72 0.008 65);                /* ghosted (Trim) text */
  --mark-pin: oklch(0.82 0.12 92 / 0.34);            /* words pinned while auditioning */
  --mark-echo: oklch(0.6 0.01 65 / 0.16);            /* the passage an Unbloat cut repeats */
  /* Suggestion marks in pencil, drawn as background images so a mark follows
     wrapped lines. Their colours are baked in: keep them equal to --fg-subtle
     (graphite) and --accent (red pencil), here and in the dark theme. */
  --mark-strike-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C18 2.4 38 4 60 3.1S101 2.5 119 3.6' fill='none' stroke='oklch(0.6 0.01 65)' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mark-insert-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C18 2.4 38 4 60 3.1S101 2.5 119 3.6' fill='none' stroke='oklch(0.585 0.19 33)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mark-insert-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M1 6.2 5 1.2 9 6.2' fill='none' stroke='oklch(0.585 0.19 33)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mark-ghost-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 20'%3E%3Cpath d='M5 1.2C3 1.2 2.2 1.8 2.2 3.6V16.4C2.2 18.2 3 18.8 5 18.8' fill='none' stroke='oklch(0.6 0.01 65)' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mark-ghost-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 20'%3E%3Cpath d='M1 1.2C3 1.2 3.8 1.8 3.8 3.6V16.4C3.8 18.2 3 18.8 1 18.8' fill='none' stroke='oklch(0.6 0.01 65)' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --hl-amber: oklch(0.91 0.1 92 / 0.85);
  --hl-sage: oklch(0.9 0.06 145 / 0.85);
  --hl-sky: oklch(0.9 0.045 235 / 0.9);
  --hl-rose: oklch(0.9 0.05 10 / 0.85);
  --hl-lilac: oklch(0.89 0.05 300 / 0.85);

  --shadow-raised: 0 1px 2px oklch(0.2 0.02 60 / 0.05), 0 2px 8px oklch(0.2 0.02 60 / 0.05);
  --shadow-overlay: 0 2px 6px oklch(0.2 0.02 60 / 0.05), 0 12px 32px oklch(0.2 0.02 60 / 0.1);
  --shadow-modal: 0 4px 12px oklch(0.2 0.02 60 / 0.06), 0 28px 72px oklch(0.2 0.02 60 / 0.16);
  --scrim: oklch(0.2 0.012 60 / 0.28);

  /* Grain at the editor's long-standing 50% strength, desaturated so the paper
     takes the canvas colour instead of the old peach wash. */
  --paper-texture-filter: grayscale(1);
  --paper-texture-blend: normal;
  --paper-texture-opacity: 0.5;
}

/* ==========================================================================
   DARK — Night
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas: oklch(0.195 0.006 70);
  --bg-surface: oklch(0.232 0.007 70);
  --bg-sunken: oklch(0.172 0.006 70);
  --bg-hover: oklch(0.275 0.008 70);
  --bg-active: oklch(0.315 0.009 70);
  --bg-inverse: oklch(0.925 0.01 85);

  --border-subtle: oklch(0.285 0.007 70);
  --border-default: oklch(0.345 0.008 70);
  --border-strong: oklch(0.5 0.01 75);

  --fg-default: oklch(0.925 0.01 85);
  --fg-muted: oklch(0.72 0.012 80);
  --fg-subtle: oklch(0.585 0.01 78);
  --fg-disabled: oklch(0.45 0.008 75);
  --fg-inverse: oklch(0.2 0.006 70);
  --icon-default: oklch(0.82 0.01 82);

  --text-ink: oklch(0.9 0.012 85);
  --text-ink-placeholder: oklch(0.52 0.01 78);

  --accent: oklch(0.76 0.14 62);
  --accent-hover: oklch(0.81 0.13 64);
  --accent-subtle: oklch(0.3 0.045 60);
  --accent-fg: oklch(0.82 0.12 64);
  --on-accent: oklch(0.2 0.02 60);

  --primary-bg: oklch(0.925 0.01 85);
  --pencil-on-primary: oklch(0.55 0.17 40);
  --primary-hover: oklch(0.86 0.012 85);
  --primary-fg: oklch(0.2 0.006 70);

  --selection: oklch(0.76 0.14 62 / 0.24);

  --success: oklch(0.72 0.11 150);
  --success-subtle: oklch(0.3 0.04 150);
  --warning: oklch(0.8 0.12 80);
  --warning-subtle: oklch(0.31 0.05 80);
  --danger: oklch(0.7 0.16 28);
  --danger-subtle: oklch(0.3 0.06 28);

  --doodle-ink: oklch(0.86 0.012 85);
  --doodle-red: oklch(0.6 0.15 30);
  --doodle-yellow: oklch(0.76 0.13 90);
  --doodle-pink: oklch(0.64 0.13 355);
  --doodle-blue: oklch(0.56 0.12 258);
  --doodle-teal: oklch(0.64 0.09 192);
  --doodle-green: oklch(0.66 0.11 148);
  --doodle-blend: normal;
  --heat-0: oklch(0.6 0.12 258);
  --heat-1: oklch(0.7 0.1 205);
  --heat-2: oklch(0.72 0.13 150);
  --heat-3: oklch(0.84 0.14 92);
  --heat-4: oklch(0.75 0.15 58);
  --heat-5: oklch(0.67 0.18 28);
  --markup-blend: normal;
  --mark-check-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M1.2 2.6C6 2.1 11 2.3 16.6 1.9M15.7 1.2C16.1 6 15.9 11 16.3 16.6M16.8 15.6C11.6 16.1 6.6 15.8 1.4 16.2M2.4 16.8C2.1 11.6 2.3 6.6 1.9 1.3' fill='none' stroke='oklch(0.585 0.01 78)' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");

  --mark-highlight: oklch(0.5 0.09 85 / 0.55);
  --mark-key-phrase: oklch(0.76 0.14 62 / 0.16);
  --mark-key-phrase-line: oklch(0.76 0.14 62 / 0.6);
  --mark-ghost: oklch(0.5 0.01 78);
  --mark-insert-ink: oklch(0.72 0.01 255);
  --mark-pin: oklch(0.6 0.1 88 / 0.35);
  --mark-echo: oklch(0.585 0.01 78 / 0.24);
  --mark-strike-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C18 2.4 38 4 60 3.1S101 2.5 119 3.6' fill='none' stroke='oklch(0.585 0.01 78)' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mark-insert-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4C18 2.4 38 4 60 3.1S101 2.5 119 3.6' fill='none' stroke='oklch(0.76 0.14 62)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mark-insert-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M1 6.2 5 1.2 9 6.2' fill='none' stroke='oklch(0.76 0.14 62)' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mark-ghost-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 20'%3E%3Cpath d='M5 1.2C3 1.2 2.2 1.8 2.2 3.6V16.4C2.2 18.2 3 18.8 5 18.8' fill='none' stroke='oklch(0.585 0.01 78)' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mark-ghost-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 20'%3E%3Cpath d='M1 1.2C3 1.2 3.8 1.8 3.8 3.6V16.4C3.8 18.2 3 18.8 1 18.8' fill='none' stroke='oklch(0.585 0.01 78)' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --hl-amber: oklch(0.5 0.09 85 / 0.55);
  --hl-sage: oklch(0.5 0.06 145 / 0.55);
  --hl-sky: oklch(0.5 0.06 240 / 0.55);
  --hl-rose: oklch(0.5 0.07 10 / 0.55);
  --hl-lilac: oklch(0.5 0.07 300 / 0.55);

  --shadow-raised: 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 8px oklch(0 0 0 / 0.22);
  --shadow-overlay: 0 2px 6px oklch(0 0 0 / 0.3), 0 14px 36px oklch(0 0 0 / 0.38);
  --shadow-modal: 0 4px 12px oklch(0 0 0 / 0.35), 0 28px 72px oklch(0 0 0 / 0.5);
  --scrim: oklch(0.1 0.005 70 / 0.55);

  /* The same grain, inverted and screened: faint light fibres, ~9 levels. */
  --paper-texture-filter: grayscale(1) invert(1);
  --paper-texture-blend: screen;
  --paper-texture-opacity: 0.65;
}

/* The prism's resting ink follows the theme; its hues never change. */
:root { --prism-ink: var(--text-ink); }

/* ==========================================================================
   WRITING FACES — set by data-write on <html>
   x-heights measured at 100px: Caslon .421, EB Garamond .405, IM Fell .458,
   Hedvig .520, Newsreader .440 (at optical size 16, the editor's text size:
   it follows font size, larger at display sizes). The scale meets Caslon
   halfway (full matching would shrink Hedvig to 81%). Fell and Hedvig ship
   one weight, so headings stay at 400 rather than a synthesized bold.
   Strike and underline sit from the content area's top: the x-height's
   middle, and 0.125em under the baseline.
   ========================================================================== */
[data-write="caslon"]   { --font-text: "adobe-caslon-pro", Georgia, serif;     --write-scale: 1;    --write-heading-weight: 600; --write-h1-weight: 700; --write-strike-y: 0.79em; --write-under-y: 1.12em; }
[data-write="garamond"] { --font-text: "EB Garamond", Georgia, serif;          --write-scale: 1.03; --write-heading-weight: 600; --write-strike-y: 0.807em; --write-under-y: 1.13em; }
[data-write="fell"]     { --font-text: "IM Fell English", Georgia, serif;      --write-scale: 0.95; --write-heading-weight: 400; --write-h1-weight: 400; --write-strike-y: 0.681em; --write-under-y: 1.03em; }
[data-write="newsreader"] { --font-text: "Newsreader", Georgia, serif;     --write-scale: 0.98; --write-heading-weight: 600; --write-h1-weight: 700; --write-strike-y: 0.52em; --write-under-y: 0.86em; }
[data-write="hedvig"]   { --font-text: "Hedvig Letters Serif", Georgia, serif; --write-scale: 0.9;  --write-heading-weight: 400; --write-h1-weight: 400; --write-strike-y: 0.76em; --write-under-y: 1.14em; }

/* ==========================================================================
   PRIMITIVES every surface may use
   ========================================================================== */
.ds-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.ds-icon-md { width: var(--icon-md); height: var(--icon-md); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}