/*
  [App name] design tokens — desktop app
  Sleeve (2026-10-18, the founder asked for the whole interface in the Sleeve theme from the Bold Concepts artifact):
  paper and ink by default; a project's page is painted in its own cover's color (the app sets --flood, --ink and
  --lift from the cover), and every surface, line and quiet text below is mixed from those three, so one change
  repaints the whole window. Names are set huge in Bricolage Grotesque; numbers, versions and file names in IBM Plex Mono.
*/

/* Fonts: bundled locally (works offline), web/fonts/: Bricolage Grotesque (variable: weight + optical size) and
   IBM Plex Mono, both SIL OFL 1.1. */

:root {
  /* ---------- The three colors everything is mixed from ---------- */
  --flood: #EEE9DF;             /* the page: paper (Oat, 2026-10-19), or a project's cover color */
  --ink: #0B0B0C;               /* text and the primary action, readable on --flood */
  --lift: #F8F5EE;              /* what popovers and sheets lean toward: a lighter oat (black when the flood is dark) */

  /* ---------- Surfaces ---------- */
  --bg-app: var(--flood);
  --bg-on-art: rgba(11, 11, 12, 0.78);   /* badges placed on cover art (BPM, key) */
  --on-art: #F2F3F5;            /* text and icons on those badges */
  --bg-sidebar: color-mix(in srgb, var(--flood) 55%, var(--lift));   /* sheets, suggestion lists, cards */
  --bg-card: color-mix(in srgb, var(--ink) 5%, transparent);         /* inputs, quiet fills */
  --bg-popover: color-mix(in srgb, var(--flood) 30%, var(--lift));   /* menus, popovers, the comment dock (opaque) */
  --bg-button-secondary: transparent;
  --bg-selected: color-mix(in srgb, var(--ink) 9%, transparent);     /* a row or menu item under the pointer */
  --bg-avatar: color-mix(in srgb, var(--ink) 13%, transparent);      /* avatars, progress tracks */
  --bg-accent-tint: color-mix(in srgb, var(--ink) 7%, transparent);  /* picked rows, confirmations */
  --bg-rail: var(--flood);      /* the sidebar is the same sheet of paper, set off by a rule */
  --cover-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.6);   /* a cover lying on the page */

  /* ---------- Rules ---------- */
  --border: color-mix(in srgb, var(--ink) 16%, transparent);         /* the hairline */
  --border-strong: color-mix(in srgb, var(--ink) 30%, transparent);  /* buttons, inputs */
  --border-row: color-mix(in srgb, var(--ink) 14%, transparent);     /* between rows */
  --border-control: color-mix(in srgb, var(--ink) 45%, transparent); /* unchecked boxes */

  /* ---------- Text ---------- */
  --text-primary: var(--ink);
  --text-secondary: color-mix(in srgb, var(--ink) 64%, transparent); /* metadata, captions, labels */
  --text-body-soft: color-mix(in srgb, var(--ink) 86%, transparent);
  --text-note: color-mix(in srgb, var(--ink) 78%, transparent);
  --text-resolved: color-mix(in srgb, var(--ink) 60%, transparent);   /* 4.9:1 on the paper (design review S6, was 48%) */
  --text-quiet: var(--text-resolved);   /* values every row repeats (stem sizes): they recede */
  --text-dim: color-mix(in srgb, var(--ink) 55%, transparent);   /* 4.1:1 on the paper (design review S6, was 38%) */
  /* ---------- Selection: a picked tab, chip or segment is printed solid in ink ---------- */
  --lit: var(--ink);
  --on-lit: var(--flood);

  /* ---------- The primary action is ink ---------- */
  --accent: var(--ink);
  --accent-hover: color-mix(in srgb, var(--ink) 78%, var(--flood));
  --on-accent: var(--flood);

  /* ---------- Signal red: the logo's teardrop (Comet, 2026-10-19). Its one job in the UI is "wet":
     a WET badge and a pressed Wet are printed in it (2026-10-20, the founder asked for it) ---------- */
  --signal: #E2492F;
  --on-signal: #FFFFFF;

  /* ---------- Wet / dry (always pair color with a text label) ---------- */
  --wet: var(--signal);
  --on-wet: var(--on-signal);
  --dry: color-mix(in srgb, var(--ink) 58%, transparent);
  --on-dry: var(--flood);

  /* ---------- Instrument colors ----------
     A stem's primary tag as a DAW-style track color: waveform, swatch, play ring, tag and filter chip.
     One lightness, distinct hues, deep enough to read on paper. */
  --cat-drums:   oklch(0.46 0.08 48);   /* a dark brown, well away from the signal red (wet) */
  --cat-perc:    oklch(0.62 0.15 55);
  --cat-bass:    oklch(0.52 0.16 260);
  --cat-vocals:  oklch(0.66 0.14 90);
  --cat-keys:    oklch(0.58 0.11 185);
  --cat-guitar:  oklch(0.58 0.15 140);
  --cat-synth:   oklch(0.56 0.19 345);
  --cat-strings: oklch(0.60 0.12 65);
  --cat-brass:   oklch(0.64 0.13 80);
  --cat-fx:      oklch(0.58 0.10 225);
  --cat-other:   oklch(0.55 0.02 250);
  --cat-returns: oklch(0.58 0.04 250);
  /* ---------- Status ---------- */
  --success: #1E8A4E;           /* synced dot, "Current", group tags */
  --warning: #C27400;           /* failed upload, expiring link, form errors */
  --danger-fill: #C9373C;       /* "Remove" confirm button (white text) */
  --danger-bg: rgba(201, 55, 60, 0.10);
  --danger-border: rgba(201, 55, 60, 0.42);
  --danger-text: #A6252A;
  --on-danger: #FFFFFF;         /* text on --danger-fill */
  --warning-bg: rgba(240, 167, 58, 0.16);   /* export pre-flight warnings */
  --warning-border: rgba(194, 116, 0, 0.45);
  --warning-text: #7A4700;

  /* ---------- Typography ---------- */
  --font-sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);   /* names set huge: weight 800, optical size 96, tight */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;  /* BPM, key, sizes, versions, times */
  --text-xs: 11px;    /* badges */
  --text-sm: 12px;    /* metadata */
  --text-md: 13px;    /* chips, secondary buttons */
  --text-base: 15px;  /* body */
  --text-lg: 16px;    /* card titles */
  --text-xl: 20px;    /* app name */
  --text-2xl: 28px;   /* section titles */
  --text-3xl: clamp(44px, 4.6vw, 76px);    /* page titles: Library, a project's name */
  --text-index: clamp(44px, 8.4vw, 132px); /* Recent's index of project names, as the Sleeve concept */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-black: 800;
  --tracking-label: 0.08em;
  --tracking-title: -0.045em;

  /* ---------- Radii: printed matter is square; controls are pills ---------- */
  --radius-xs: 2px;   /* tags, badges */
  --radius-sm: 4px;   /* nav items, small buttons */
  --radius-md: 6px;   /* inputs */
  --radius-lg: 3px;   /* covers, cards */
  --radius-xl: 8px;   /* popovers */
  --radius-2xl: 10px; /* comment dock */
  --radius-3xl: 12px; /* Recent's booth */
  --radius-pill: 999px;
  --radius-box: 3px;   /* every control: buttons, chips, switches, search, menus' buttons, bars (2026-10-21) */
  --radius-tag: var(--radius-pill);   /* labels: tags, badges, counts (2026-10-21) */

  /* ---------- Spacing (px) ---------- */
  --space-1: 4px;  --space-2: 6px;  --space-3: 8px;  --space-4: 10px;
  --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 18px;
  --space-9: 20px; --space-10: 22px; --space-11: 24px; --space-12: 28px;

  /* ---------- Sizes ---------- */
  --sidebar-width: 232px;
  --control-lg: 44px;   /* primary/secondary buttons, list rows (touch target) */
  --control-md: 36px;   /* chips, segmented buttons */
  --control-sm: 32px;   /* icon buttons, play buttons in rows */
  --avatar: 30px;

  /* ---------- Elevation ---------- */
  --shadow-popover: 0 18px 44px -14px rgba(11, 11, 12, 0.34), 0 2px 6px rgba(11, 11, 12, 0.08);
  --shadow-dock: 0 28px 60px -18px rgba(11, 11, 12, 0.4);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;    /* hover swaps (remove access) */
  --dur-base: 320ms;    /* comment dock slide */
  --dur-hover: 120ms;   /* hover colour and background */
  --dur-press: 180ms;   /* press feedback, small state changes */
  --dur-menu: 200ms;    /* menus, popovers and sheets opening (closing takes about 60% of it) */
  --dur-page: 240ms;    /* page change */
  --dur-flood: 600ms;   /* the page taking on a cover's color */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);   /* things arriving: fast, then settling */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);       /* things leaving: quick, no lingering */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* hovers and presses */
  --press-scale: 0.97;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}