/*
 * COPIED FROM noted-app @ 10dd36e — do not edit here.
 *
 * This is a duplicate, not a shared module. It will drift from the app, and
 * that is an accepted trade: a package or submodule to sync one CSS file
 * across two repos costs more than it saves at this size. When the app's
 * tokens change and the difference matters, re-copy and update this line.
 */
/*
 * Noted design tokens.
 * Single source of truth for colour, radius, shadow and type-family values.
 * Font families are declared here only — no font files are installed or imported yet.
 */

:root {
  color-scheme: light;

  /* The page behind the cards.
   *
   * Equal to `--paper` in day, and not a redundant token for it: at night the
   * page sits a step deeper than the cards, so the two part company. Day keeps
   * them identical, which is what `body` painting `--paper` always meant. */
  --app-bg: #fffefb;

  /* Core surfaces and text */
  --paper: #fffefb;
  --ink: #26221d;
  --muted: #777066;
  --line: #e6e0d7;

  /* Accent */
  --orange: #a96543;
  --orange-soft: #e9ded1;

  /* Cotton greys — controls and hover states */
  --cotton-paper-deep: #fbf9f5;
  --cotton-control: #f7f4ef;
  --cotton-hover: #f0ece6;

  /* The solid button — "New note", and the two like it.
   *
   * Role tokens, not `--ink` on `--paper`, because those two invert *wrongly*
   * rather than merely differently: swap the palette and the darkest solid on
   * the page becomes the lightest, so the primary button turns into the
   * brightest object on a dark screen.
   *
   * The hover shows why a raw hex could never have worked. In day it is a
   * darker ink; at night it is a *lighter* accent. Which direction "hover"
   * means is itself palette-dependent. */
  --btn-solid-bg: #26221d;
  --btn-solid-fg: #fffefb;
  --btn-solid-hover: #1a1714;

  /* The scrim behind the mobile nav drawer. */
  --backdrop: #26221d33;

  /* The two night depths, as the Appearance card draws them.
   *
   * Declared here and deliberately *not* overridden in the night blocks below:
   * these chips show what the palette you are not using looks like, so they
   * cannot ask for the palette currently in force. */
  --preview-night-charcoal: #211d17;
  --preview-night-black: #0e0d0c;

  /* Note tints, in canonical order: paper, white, butter, mint, sky, rose,
   * lavender. Every one of them is a near-white — the difference between a
   * card and its neighbour is a cast of hue, not a colour block. `white` is
   * the exception that proves it: flat #fff, the only one with no cast at all,
   * for a note that should read as paper-white rather than as paper.
   *
   * The tinted five carry roughly twice the chroma they first shipped with:
   * 8–10 points of spread between their channels rather than 4–5. The two
   * neutrals above them are deliberately untouched.
   *
   * Doubled rather than nudged, because at L ≈ 98% a percentage has nowhere to
   * land. Scaling HSL saturation by 1.175 — a "15–20% more saturated" ask —
   * moves every channel by under 1/255, so all five round back to the byte they
   * started on and the change is a literal no-op. Lightness is what pins these
   * values so close to white, so chroma has to move in multiples to show up at
   * all. Anything expressed as a percentage of it is a percentage of nearly
   * nothing. */
  --tint-paper: #fffefb;
  --tint-white: #ffffff;
  --tint-butter: #fffcf5;
  --tint-mint: #f6fefa;
  --tint-sky: #f6fcfe;
  --tint-rose: #fff9f5;
  --tint-lavender: #fbf7fe;

  /* Tint edges: the same seven hues at a strength that can draw a 1px line.
   *
   * A tint is a fill — at L ≈ 98% it disappears the moment it is asked to be a
   * border, which is exactly what `LO9K7` asks of it: the workspace chips are
   * near-white squares outlined in their own colour, and that outline is the
   * only place a workspace's hue appears while the rail is collapsed.
   *
   * `paper`, `mint`, `sky` and `lavender` are the board's own values. The other
   * three are built to match them — same lightness band, same modest chroma —
   * because the board only ever drew four workspaces and the colour picker
   * offers seven. */
  --edge-paper: #c7b27a;
  --edge-white: #b9b3a9;
  --edge-butter: #c9b878;
  --edge-mint: #8fb8a0;
  --edge-sky: #8fa9b8;
  --edge-rose: #c4a69b;
  --edge-lavender: #a99bb8;

  /* Radii */
  --radius-button: 4px;
  --radius-field: 4px;
  --radius-dropdown: 6px;
  --radius-toggle: 10px;
  --radius-swatch: 14px;
  --radius-avatar-sm: 16px;
  --radius-avatar-lg: 32px;
  --radius-note-card: 0;

  /* Shadows */
  --shadow-dropdown: 0 6px 16px #5a4a3a26;
  --shadow-drag-ghost: 0 8px 20px #5a4a3a18;

  /* Type families (files land in Step 2) */
  --font-heading: Newsreader, Georgia, serif;
  --font-ui: Inter, system-ui, sans-serif;
  --font-caption: 'IBM Plex Mono', monospace;
  --font-note: Arimo, Arial, sans-serif;

  /* Computed type scale — defaults only.
   *
   * src/lib/typography.ts owns the real values and useTypeScale writes them
   * onto the document element from Settings, overriding everything here. These
   * exist so a stylesheet still resolves before the first layout effect, and
   * they are the same numbers scaleFor(16) and the `medium` margin produce. */
  --note-font: var(--font-note);
  --measure: 77%;
  --scale-h1: 32px;
  --scale-body: 16px;

  /* Note leading and heading weight — the shape of note text, not its size.
   *
   * Unlike the scale above these do not vary with the base size, so they are
   * real tokens rather than defaults waiting to be overwritten. They live here
   * because two places render the same note text and must agree: the editor
   * (src/editor/theme.ts for body, src/editor/highlight.ts for headings) and
   * the Settings type preview (.typography-preview__*). Those two drifted —
   * the preview was 1.5/1.2/400 against the editor's 1.6/1.25/650 — which is
   * exactly the mismatch a shared token makes impossible. Change them here. */
  --note-leading: 1.6;
  --note-heading-leading: 1.25;
  --note-heading-weight: 650;
}

/*
 * The measure as *applied*, which is not always the measure as *set*.
 *
 * `--measure` is the setting: `useTypeScale` writes it onto `<html>` as an
 * inline style, so nothing in a stylesheet can override it — inline wins, and
 * `!important` on a token this widely read is not a trade worth making. So the
 * two consumers (`.focus-pane__measure` here, `.cm-content` in
 * `editor/theme.ts`) read `--column` instead, and this is where the setting
 * gets the last word taken off it.
 *
 * On a phone there is no column to speak of. 63% of a 390px screen is a 246px
 * line, which is not a considered measure, it is a straw; and the control that
 * would widen it is not on screen at this width — mobile chrome drops it, since
 * the choice it offers is a desktop choice. Full width, and the card's own
 * padding is the margin.
 */
:root {
  --column: var(--measure);
}

@media (max-width: 719px) {
  :root {
    --column: 100%;
  }
}

/*
 * Night.
 *
 * `useTheme` puts `data-theme` on `<html>`; these blocks override the same token
 * names `:root` declares, and every component goes on asking for `var(--ink)`
 * without knowing which palette answered.
 *
 * Colours live here rather than being published from TypeScript the way the type
 * scale is, and the difference is not arbitrary. The type scale is *computed* —
 * one base size drives nine values through multipliers, and three consumers have
 * to agree to the pixel, so one function has to own the arithmetic. Palettes are
 * three static sets of the same names, which is exactly what the cascade already
 * resolves. Publishing them from JS would move colour out of the file that
 * claims to be its single source of truth.
 *
 * Anything added to `:root` above has to be added to both blocks below.
 * `tokens.test.ts` fails the build if it is not: a token with no night value
 * does not fall back to something reasonable, it keeps its *day* value and
 * paints a light bar across a dark screen.
 */
:root[data-theme='night'] {
  color-scheme: dark;

  --app-bg: #17140f;
  --paper: #211d17;
  --ink: #ede6da;
  --muted: #a09585;
  --line: #35302a;

  --orange: #c9825c;
  /* The selection wash. A dark warm band under light text, not the pale one
   * day uses — an unchanged `--orange-soft` here would erase the text it is
   * meant to sit behind. */
  --orange-soft: #4a3427;

  --cotton-paper-deep: #1c1913;
  --cotton-control: #2a251e;
  --cotton-hover: #3d372f;

  --btn-solid-bg: #c9825c;
  --btn-solid-fg: #211d17;
  --btn-solid-hover: #d8926b;

  --backdrop: #00000080;

  /* Deeper and more opaque than day's. A shadow tuned for a white page is
   * invisible on a dark one — the thing it separates is already darker than
   * the shadow itself. */
  --shadow-dropdown: 0 6px 16px #00000066;
  --shadow-drag-ghost: 0 8px 20px #00000059;

  /* The same seven names, the same hues, an eighth of the lightness.
   *
   * `white` is the one that cannot keep its literal meaning — there is no dark
   * flat white. It becomes the only cool, cast-free dark in the set, which
   * preserves what it is *for*: the note that deliberately is not paper. */
  --tint-paper: #211d17;
  --tint-white: #1f1f21;
  --tint-butter: #241f16;
  --tint-mint: #18201b;
  --tint-sky: #181e21;
  --tint-rose: #241b17;
  --tint-lavender: #1e1b22;

  /* The board is a day board, so these are derived: the same hues held at a
   * lightness that reads against `--cotton-paper-deep` rather than against
   * paper. Dropped to ~40% rather than inverted — a hue that survives the
   * change of ground is what makes a workspace recognisable in both palettes. */
  --edge-paper: #6f6247;
  --edge-white: #5f5a52;
  --edge-butter: #706447;
  --edge-mint: #4f6656;
  --edge-sky: #4f5d66;
  --edge-rose: #66534d;
  --edge-lavender: #5d5566;
}

/*
 * Night, deeper. True black behind the cards, for an OLED panel or a genuinely
 * dark room. A third value column, not a second mechanism.
 */
:root[data-theme='night-black'] {
  color-scheme: dark;

  --app-bg: #000000;
  --paper: #0e0d0c;
  --ink: #f2ece2;
  --muted: #8e857a;
  --line: #262220;

  --orange: #d08b62;
  --orange-soft: #3d2a1f;

  --cotton-paper-deep: #0b0a09;
  --cotton-control: #1a1715;
  --cotton-hover: #2b2624;

  --btn-solid-bg: #d08b62;
  --btn-solid-fg: #0e0d0c;
  --btn-solid-hover: #dd9a71;

  --backdrop: #000000a6;

  --shadow-dropdown: 0 6px 16px #00000080;
  --shadow-drag-ghost: 0 8px 20px #00000073;

  --tint-paper: #0e0d0c;
  --tint-white: #101012;
  --tint-butter: #12100a;
  --tint-mint: #0c130f;
  --tint-sky: #0b1013;
  --tint-rose: #130d0b;
  --tint-lavender: #100e14;

  --edge-paper: #5f533c;
  --edge-white: #514d46;
  --edge-butter: #60553c;
  --edge-mint: #435749;
  --edge-sky: #434e57;
  --edge-rose: #574642;
  --edge-lavender: #4f4857;
}