/* Papel e Tinta tokens, copied from the app (nanquim-app/src/renderer/src/styles/tokens.css) without its Tailwind @theme block.
   Refresh from there when the brand changes. */
/*
  Nanquim design tokens — Papel e Tinta, the brand's design system (docs/brand/05-design-system.md).
  The single source for colour, type, space, radius, elevation and motion; docs/design/README.md
  explains the families and the rules; nothing in the renderer may carry a raw colour or a pixel
  size that is not defined here (ESLint enforces it).

  Paper and ink: near-neutral, slightly cool paper, graphite text and one pen-blue accent
  ("azul-caneta", the blue of the pen that signs). Colour belongs to the team's figures.

  Families
    Paper   backgrounds: app · sidebar · paper · subtle · elevated · hover · active · overlay
    Ink     text: primary · secondary · tertiary · inverse
    Lines   borders: hairline · strong · focus
    Pen     the one accent: accent · strong · fill (+ fill-text) · subtle · text
    Grifo   the highlighter: highlight · highlight-subtle (marked text, comments, search hits; never a button)
    Signals success · warning · danger · info, each with a -subtle background and, for dots that
            never carry text, a lighter -dot
    Diff    added / removed / changed backgrounds, word marks and text
    Brand   the mark's own colours (BrandMark, build/icon.svg)

  Two type scales: the chrome ramp below (roles, not sizes) and the document scale (--doc-*),
  which the person adjusts in Ajustes › Aparência.

  Light is the default; dark overrides under [data-theme="dark"].
*/
:root {
  /* ---- Type: families ---- */
  /* Chrome: the system face (SF Pro on macOS, Segoe UI Variable on Windows), as Apple's HIG asks. */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', 'Inter Variable', Roboto, sans-serif;
  /* Reading: documents and conversations, bundled so every machine reads the same text. */
  --font-doc: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', sans-serif;
  /* Brand voice: headlines of the first run, welcome and empty states (.display). Never body text. */
  --font-display: 'Instrument Sans Variable', 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'New York', 'Iowan Old Style', 'Source Serif 4', Georgia, serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* ---- Type: the chrome ramp (role → size / line height) ----
     micro    counts and key caps            caption  meta lines, section labels, hints
     label    labels, dense rows, badges     ui       the chrome default: rows, menus, controls
     body     dialog text, large controls    lead     dialog titles, conversation text
     title    page and step titles           heading  the opening question, the welcome title
     display  brand headlines only (first run, welcome), with .display; display-sm for the second line.
     Nothing below 11 px. */
  --text-micro: 11px;
  --leading-micro: 14px;
  --text-caption: 11px;
  --leading-caption: 16px;
  --text-label: 12px;
  --leading-label: 16px;
  --text-ui: 13px;
  --leading-ui: 18px;
  --text-body: 14px;
  --leading-body: 20px;
  --text-lead: 15px;
  --leading-lead: 22px;
  --text-title: 17px;
  --leading-title: 24px;
  --text-heading: 22px;
  --leading-heading: 28px;
  --text-display-sm: 28px;
  --leading-display-sm: 32px;
  --text-display: 34px;
  --leading-display: 38px;
  /* Tracking follows size: looser when small, tighter when large (Inter's dynamic metrics). */
  --tracking-caption: 0.01em;
  --tracking-title: -0.012em;
  --tracking-display: -0.024em;

  /* ---- Type: the document scale (user adjustable 14–20 via --doc-base) ---- */
  --doc-base: 16px;
  --doc-line: 1.6;
  --doc-measure: 72ch;
  --doc-max-width: 760px;

  /* ---- Space (4pt grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius: chip 4 · control 6 · row 8 · card 10 · panel 14 · sheet 18 · pill.
     Concentric corners: an inner radius is the outer radius minus the padding between them. ---- */
  --radius-chip: 4px;
  --radius-control: 6px;
  --radius-row: 8px;
  --radius-card: 10px;
  --radius-panel: 14px;
  --radius-sheet: 18px;
  --radius-pill: 999px;

  /* ---- Controls: heights (xs icon buttons · sm buttons and title-bar controls · md inputs and buttons · lg primary calls) ---- */
  --control-xs: 24px;
  --control-sm: 28px;
  --control-md: 32px;
  --control-lg: 40px;
  /* Icons: 14 inside sm controls, 16 as the default glyph, 20 for empty states and marks. */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;

  /* ---- Layout ---- */
  --sidebar-width: 280px;
  --sidebar-rail: 44px;
  --panel-width: 440px;
  --header-height: 44px;
  --row-height: 28px;

  /* ---- Motion (docs/brand/06-movimento.md): the more frequent the action, the less it moves.
     Keyboard, palette, context menus and theme switches never animate (--dur-0). Enter with ease-out,
     leave faster with ease-exit; only transform and opacity travel. ---- */
  --dur-0: 0ms;
  --dur-press: 120ms;
  --dur-hover: 150ms;
  --dur-tooltip: 125ms;
  --dur-menu: 180ms;
  --dur-menu-out: 120ms;
  --dur-move: 240ms;
  --dur-modal: 280ms;
  --dur-modal-out: 180ms;
  --dur-view: 320ms;
  --dur-toast: 400ms;
  --dur-step: 480ms;
  --dur-story: 820ms;
  --stagger: 45ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Apple springs (duration + bounce, WWDC23) sampled into linear(). */
  /* snappy: 0.30 s, bounce 0.10, settles in ~280 ms */
  --ease-spring-snappy: linear(0, 0.01, 0.035, 0.073, 0.118, 0.17, 0.225, 0.282, 0.338, 0.394, 0.449, 0.501, 0.55, 0.596, 0.639, 0.679, 0.715, 0.749, 0.779, 0.807, 0.831, 0.854, 0.873, 0.891, 0.907, 0.92, 0.932, 0.943, 0.952, 0.96, 0.967, 0.973, 0.978, 0.982, 0.986, 0.989, 0.991, 0.993, 0.995, 0.997, 1);
  /* soft: 0.40 s, bounce 0.15, settles in ~510 ms */
  --ease-spring-soft: linear(0, 0.018, 0.065, 0.13, 0.206, 0.287, 0.369, 0.449, 0.524, 0.594, 0.658, 0.715, 0.765, 0.808, 0.846, 0.878, 0.905, 0.927, 0.945, 0.96, 0.972, 0.982, 0.989, 0.995, 0.999, 1.002, 1.004, 1.005, 1.006, 1.006, 1.006, 1.006, 1.006, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.002, 1);
  /* bouncy: 0.50 s, bounce 0.30, settles in ~730 ms; the team's figures and the brand mark only */
  --ease-spring-bouncy: linear(0, 0.023, 0.084, 0.169, 0.267, 0.372, 0.475, 0.574, 0.665, 0.745, 0.815, 0.874, 0.923, 0.961, 0.991, 1.013, 1.029, 1.038, 1.044, 1.046, 1.045, 1.043, 1.039, 1.035, 1.03, 1.025, 1.021, 1.016, 1.013, 1.009, 1.006, 1.004, 1.002, 1.001, 1, 0.999, 0.998, 0.998, 0.998, 0.998, 1);
  /* The chrome's everyday names: hover and colour (fast), moving a panel (base), changing the view (slow). */
  --motion-fast: var(--dur-hover);
  --motion-base: var(--dur-move);
  --motion-slow: var(--dur-view);
  --ease-standard: var(--ease-out);
  --ease-enter: var(--ease-out);

  /* ---- Layers (z-index): sticky 5 · stage chrome 10–30 · overlay 40 · dialog 50 · toast 60 · editor popups 70 ---- */
  --layer-sticky: 5;
  --layer-chrome: 10;
  --layer-overlay: 40;
  --layer-dialog: 50;
  --layer-toast: 60;
  --layer-popup: 70;

  /* ---- Paper ---- */
  --bg-app: #f6f7f8;
  --bg-sidebar: #f0f1f3;
  --bg-paper: #ffffff;
  --bg-subtle: #eceef0;
  --bg-elevated: #ffffff;
  --bg-hover: rgba(24, 28, 40, 0.05);
  /* Lighter than the book's 0.085 so tertiary text on a selected row keeps 4.5:1 on paper. */
  --bg-active: rgba(24, 28, 40, 0.07);
  --bg-overlay: rgba(14, 16, 24, 0.32);

  /* ---- Ink ---- */
  --text-primary: #1b1e24;
  --text-secondary: #53575f;
  /* ≥ 4.5:1 on every surface it sits on: app, sidebar (4.7), subtle (4.5) and the tinted notices. */
  --text-tertiary: #686c73;
  --text-inverse: #ffffff;

  /* ---- Lines ---- */
  --border-hairline: #e0e2e5;
  --border-strong: #caccd1;
  /* Focus is the pen blue, offset from the control; fields swap it for a blue border and --ring-focus. */
  --border-focus: #2254c1;

  /* ---- Pen ("azul-caneta"): only the next step, selection, focus, links and "the team is working".
     --accent paints icons, links and selection (6.8:1 on paper); --accent-fill paints the one filled
     action per screen (6.8:1 with white text); --accent-text is blue text on the subtle tint. ---- */
  --accent: #2254c1;
  --accent-strong: #1141ad;
  --accent-fill: #2254c1;
  --accent-fill-text: #ffffff;
  --accent-subtle: #e9f0ff;
  --accent-text: #1b3f97;

  /* ---- Grifo: the highlighter. Marked text, open comments, search hits, what is new. Never a button. ---- */
  --highlight: #fcea7f;
  --highlight-subtle: #fdf3bc;

  /* ---- Signals: double as text on their subtle backgrounds, so they sit at ≥ 4.5:1 there. ---- */
  --success: #137d41;
  --success-subtle: #e1f9e6;
  --warning: #9a5d00;
  --warning-subtle: #fff2d6;
  /* Hue 22°: red, outside the terracotta band the accents never use. */
  --danger: #c12535;
  --danger-subtle: #ffecea;
  --info: #2254c1;
  --info-subtle: #e9f0ff;
  /* Dots and glyphs that never carry text keep the lighter hues. */
  --warning-dot: #b7791f;
  --success-dot: #1a8f4c;

  /* ---- Diff ---- */
  --diff-add-bg: #dafbe1;
  --diff-add-word: #aceebb;
  --diff-add-text: #116329;
  --diff-remove-bg: #ffebe9;
  --diff-remove-word: rgba(255, 129, 130, 0.4);
  --diff-remove-text: #82071e;
  --diff-change-bg: #fff5d6;

  /* ---- Elevation: low, ink-tinted shadows. card (barely lifts) · raised (the one card a screen leads
     with) · popover (menus, tooltips, toasts) · dialog (sheets float). No glow, no glass on content. ---- */
  --elevation-card: 0 1px 2px rgba(16, 19, 30, 0.06), 0 1px 1px rgba(16, 19, 30, 0.03);
  --elevation-raised: 0 1px 2px rgba(16, 19, 30, 0.04), 0 12px 32px -10px rgba(16, 19, 30, 0.14);
  --elevation-popover: 0 10px 30px -6px rgba(16, 19, 30, 0.16), 0 3px 8px -2px rgba(16, 19, 30, 0.08);
  --elevation-dialog: 0 28px 70px -14px rgba(16, 19, 30, 0.3), 0 8px 20px -8px rgba(16, 19, 30, 0.12);
  /* Fields and choice cards: a soft halo instead of the outline (never both). */
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--border-focus) 22%, transparent);

  /* ---- Brand: the mark's figure in pen blue, its line in graphite (BrandMark, build/icon.svg) ---- */
  --brand-pen: #2254c1;
  --brand-ink: #1b1e24;
  --brand-white: #ffffff;

  color-scheme: light;
}

:root[data-theme='dark'] {
  /* Tinta: the brand's ink background. */
  --bg-app: #121417;
  --bg-sidebar: #0e0f13;
  --bg-paper: #191b1f;
  --bg-subtle: #1f2227;
  --bg-elevated: #222429;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-overlay: rgba(0, 0, 0, 0.55);

  --text-primary: #eff0f3;
  --text-secondary: #bbbec4;
  /* ≥ 4.7:1 on elevated menus and the tinted notices. */
  --text-tertiary: #9598a0;
  --text-inverse: #121417;

  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-focus: #7ea3f5;

  /* The fill keeps white text at 5:1; icons, links and selection take the lighter pen (6.2:1 on
     elevated), blue text on the tint takes --accent-text (7.4:1). */
  --accent: #7ea3f5;
  --accent-strong: #4a7ae4;
  --accent-fill: #3c6ad3;
  --accent-fill-text: #ffffff;
  --accent-subtle: #1b2c51;
  --accent-text: #a0bef9;
  /* Dim enough to keep light text on it at 5.6:1. */
  --highlight: #6b5f27;
  --highlight-subtle: #3a341b;
  --warning-dot: #e0a84b;
  --success-dot: #4cc383;

  --success: #5dc47e;
  --success-subtle: #16321f;
  --warning: #e4ac59;
  --warning-subtle: #3c2a0e;
  --danger: #ed7473;
  --danger-subtle: #412120;
  --info: #a0bef9;
  --info-subtle: #1b2c51;

  --diff-add-bg: rgba(46, 160, 67, 0.18);
  --diff-add-word: rgba(46, 160, 67, 0.42);
  --diff-add-text: #7ee2a0;
  --diff-remove-bg: rgba(248, 81, 73, 0.14);
  --diff-remove-word: rgba(248, 81, 73, 0.42);
  --diff-remove-text: #ffa198;
  --diff-change-bg: rgba(227, 179, 65, 0.18);

  --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elevation-raised: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px -10px rgba(0, 0, 0, 0.55);
  --elevation-popover: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  /* In the dark the border works harder than the shadow. */
  --elevation-dialog: 0 30px 80px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--border-focus) 30%, transparent);

  --brand-pen: #3c6ad3;
  --brand-ink: #eff0f3;

  color-scheme: dark;
}