/*
  [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-contact: 0 0.5px 1px rgba(0, 0, 0, 0.28), 0 2px 3px -1px rgba(0, 0, 0, 0.14);   /* where a cover touches the page (founder, cover edges, 2026-10-21) */
  --cover-shadow: var(--cover-contact), 0 34px 70px -34px rgba(0, 0, 0, 0.6);   /* a cover lying on the page */
  --cover-shadow-rest: var(--cover-contact), 4px 20px 30px -22px rgba(0, 0, 0, 0.55);   /* a Library card at rest: one corner lifting a fraction */
  --cover-shadow-sleeve: var(--cover-contact), 0 14px 22px -14px rgba(0, 0, 0, 0.42);   /* the project page's cover: close to the page (founder, 2026-10-21) */

  /* ---------- 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" */
  --on-success: #FFFFFF;        /* text on --success */
  --group: oklch(0.44 0.13 300);   /* the Group tag, the one coloured tag on a stem row: ditto-sheet violet (founder, 2026-10-31) */
  --on-group: #FFFFFF;
  --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;
  --meter-reepo: var(--warning);   /* Reepo's share of the disk on the sidebar's storage line (2026-10-27): the app's orange,
                                      never the signal red (red means wet) */

  /* ---------- 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.96;     /* a press: 1 px of travel on a 44 px box (was .97, not felt) */
  --press-scale-sm: 0.9;   /* the round 32-42 px controls press deeper: play, pause, the pick bar's × */
  /* motion pass (2026-10-21, the founder picked all of "Reepo Motion Pass", the release at "soft") */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* lands with a little give: a settle, a drop received, a knob */
  --ease-soft: cubic-bezier(.22, 1.2, .36, 1);     /* a hint of give: a mark sliding to its new place */
  --dur-out: 160ms;   /* a hover leaving; it arrives at once */
  --dur-pop: 280ms;   /* a release or a landing */
  /* motion, round two (2026-10-21, the founder's picks from "Reepo Motion Two"): things print */
  --dur-print: 360ms;       /* a value reprinted in ink (a version's changed liner notes) */
  --stagger-row: 16ms;      /* a page's rules drawing one row after another; 8 rows at most (motion budget, D3) */
  --dur-wave-print: 90ms;   /* a waveform printing from its first bar to its last (a page complete in 400 ms, D3) */
}

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