/* tokens.css: THE style source. Everything in app.css is var(--...) from here.

   Two layers:
     LOOK     shape and type: fonts, sizes, radii, how sections and notes are drawn, and
              which palette colour each ROLE takes (a filled root note in ink or in the
              accent, what the primary button is). A [data-look] block below.
     PALETTE  colour only: --color-bg, --color-text, --color-accent ... Authored as seeds
              in js/palettes.js and derived there, applied to :root at runtime. The values
              in :root below are the Canvas palette, used before JS runs.

   Any palette works on any look. To add a look: a [data-look] block here plus an entry
   in LOOKS in js/app.js. To add a palette: one line in js/palettes.js. */

:root {
  /* ---- type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Segoe UI Symbol", "Apple Symbols", sans-serif;
  --font-serif: ui-serif, "New York", "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Segoe UI Symbol", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.5rem;
  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 650;
  --tracking-caps: 0.1em;
  --leading: 1.55;

  /* ---- space and fixed sizes */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --tap: 44px;
  --chip-height: 44px;
  --note-size: 50px;
  --content-width: 720px;
  --topbar-h: 52px;
  --tabbar-h: 58px;
  /* Space the system reserves (notch, status bar, home bar). The Android build sets
     these to 0px because its native shell already keeps the page clear of them. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ---- motion */
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- palette (Canvas; replaced at runtime by js/palettes.js) */
  --color-bg: #f3eee4;
  --color-surface: #faf7f0;
  --color-surface-2: #ebe4d7;
  --color-surface-3: #e0d7c6;
  --color-border: #d9cfbd;
  --color-text: #2b2723;
  --color-text-2: #675e54;
  --color-text-3: #978d80;
  --color-accent: #a4502f;
  --color-accent-soft: #eedfd2;
  --color-on-accent: #faf7f0;
  --color-char: #a4502f;
  --color-char-text: #faf7f0;
  --color-key-white: #fbf8f2;
  --color-key-black: #2b2723;
  --color-key-line: #d3c8b5;
  --color-fret-board: #ece4d5;
  --color-fret-wire: #c2b59f;
  --color-string: #8c7f6b;
  --color-inlay: #dcd1be;
  --color-bar-bg: rgba(243, 238, 228, 0.9);
  --shadow-2: 0 -6px 28px rgba(60, 45, 30, 0.12);
  --focus-ring: 0 0 0 3px rgba(164, 80, 47, 0.28);
}

/* ================================================================ LOOK: Canvas (default)
   A printed score: serif headings, hairline rules instead of boxes, notes drawn as
   noteheads (the root a filled ink dot, the rest hollow rings). */
:root, [data-look="canvas"] {
  --font-display: var(--font-serif);
  --weight-display: 560;
  --h1-size: 2.5rem;
  --h2-size: 1.375rem;
  --tracking-tight: -0.012em;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border-width: 1px;
  --card-bg: transparent;
  --card-border-width: 0px;
  --card-border-color: transparent;
  --card-radius: 0px;
  --card-shadow: none;
  --card-pad: 0px;
  --card-gap: var(--space-7);
  --card-rule: var(--border-width) solid var(--color-border);
  --card-rule-pad: var(--space-6);
  --chip-bg: transparent;
  --chip-border: var(--color-border);
  --chip-radius: var(--radius-pill);
  --note-radius: 50%;
  --note-line-width: 1.5px;
  --color-root: var(--color-text);
  --color-root-text: var(--color-bg);
  --color-tone: var(--color-surface);
  --color-tone-text: var(--color-text);
  --color-tone-line: var(--color-text);
  --btn-primary-bg: var(--color-text);
  --btn-primary-text: var(--color-bg);
  --shadow-1: none;
}

/* ---- the boxed looks share cards, filled note dots and accent-coloured roots */
[data-look="paper"], [data-look="indigo"], [data-look="mono"], [data-look="dark"], [data-look="midnight"] {
  --font-display: var(--font-sans);
  --weight-display: 700;
  --h1-size: 2.375rem;
  --h2-size: 1.125rem;
  --tracking-tight: -0.022em;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --border-width: 1px;
  --card-bg: var(--color-surface);
  --card-border-width: var(--border-width);
  --card-border-color: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-1);
  --card-pad: var(--space-5);
  --card-gap: var(--space-4);
  --card-rule: var(--card-border-width) solid var(--card-border-color);
  --card-rule-pad: 0px;
  --chip-bg: var(--color-surface-2);
  --chip-border: transparent;
  --chip-radius: var(--radius-pill);
  --note-radius: var(--radius-pill);
  --note-line-width: 0px;
  --color-root: var(--color-accent);
  --color-root-text: var(--color-on-accent);
  --color-tone: var(--color-accent-soft);
  --color-tone-text: var(--color-text);
  --color-tone-line: transparent;
  --btn-primary-bg: var(--color-accent);
  --btn-primary-text: var(--color-on-accent);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.03);
}

/* LOOK: Paper, a pocket book: serif headings, soft square corners */
[data-look="paper"] {
  --font-display: var(--font-serif);
  --weight-display: 600;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-pill: 8px;
}

/* LOOK: Indigo, the first look: rounded cards, bold sans (the shared boxed defaults) */

/* LOOK: Mono, a type specimen: monospace headings, square corners, heavy rules, ink roots */
[data-look="mono"] {
  --font-display: var(--font-mono);
  --tracking-tight: -0.03em;
  --radius-lg: 0px;
  --radius-md: 0px;
  --radius-sm: 0px;
  --radius-pill: 0px;
  --border-width: 1.5px;
  --card-border-color: var(--color-text);
  --shadow-1: none;
  --color-root: var(--color-text);
  --color-root-text: var(--color-bg);
  --color-tone: var(--color-surface-2);
  --btn-primary-bg: var(--color-text);
  --btn-primary-text: var(--color-bg);
}

/* LOOK: Dark, borderless tiles on a quiet ground */
[data-look="dark"] {
  --radius-lg: 14px;
  --card-border-width: 0px;
  --card-rule: none;
  --card-shadow: none;
}

/* LOOK: Midnight, very round, with notes drawn as rings in the accent */
[data-look="midnight"] {
  --radius-lg: 26px;
  --radius-md: 16px;
  --h1-size: 2.5rem;
  --note-line-width: 2px;
  --color-tone: transparent;
  --color-tone-line: var(--color-accent);
}