/*
  [App name] design tokens — desktop app
  Source of truth: the "Iteration 1" page of the Stem Repository UI Mockups canvas.
  Every value here was taken directly from those screens. Do not invent new colors;
  if something seems missing, find it in design/reference/screens and add it here.
*/

/* Fonts: bundle locally (works offline). npm i @fontsource/ibm-plex-sans @fontsource/ibm-plex-mono */
/* import "@fontsource/ibm-plex-sans/400.css"; "…/500.css"; "…/600.css";
   import "@fontsource/ibm-plex-mono/400.css"; "…/500.css"; */

:root {
  /* ---------- Surfaces (darkest → lightest) ---------- */
  --bg-app: #111316;            /* page / main content background */
  --bg-stage: #0D0F12;          /* Recent crate stage */
  --bg-on-art: #0B0C0E;         /* badges placed on cover art (BPM, key) */
  --bg-sidebar: #16191D;        /* left nav, panels, table body, cards on Shared/Recent */
  --bg-card: #1A1D22;           /* inputs, segmented controls, info cards */
  --bg-popover: #1B1F25;        /* dropdowns, comment dock, sheets */
  --bg-button-secondary: #22262C;
  --bg-selected: #262B32;       /* selected nav item, selected row, chips */
  --bg-avatar: #2B3038;         /* avatar fallback, progress track, tags */
  --bg-accent-tint: #1F1A33;    /* accent-outlined confirmation panels */
  --vinyl-groove: #121216;      /* Recent crate record grooves */
  --vinyl-groove-2: #1C1C22;
  --vinyl-sheen: rgba(255, 255, 255, 0.11);    /* Recent: fixed light on the vinyl (doesn't spin) */
  --vinyl-rim: rgba(255, 255, 255, 0.06);
  --stage-light: rgba(255, 238, 214, 0.13);    /* Recent: the warm spotlight over the front sleeve */
  --stage-beam: rgba(255, 240, 222, 0.045);    /* Recent: the faint cone of light from above */
  --stage-shade: rgba(4, 5, 7, 0.7);           /* Recent: the dark the room falls off into */
  --sleeve-falloff: rgba(0, 0, 0, 0.22);       /* Recent: light fading down the sleeve */
  --lip-edge: rgba(255, 244, 230, 0.07);       /* Recent: light catching the crate's front edge */
  --grain-opacity: 0.06;                       /* Recent: film grain over the stage */
  --sleeve-glint: rgba(255, 255, 255, 0.16);   /* Recent: the streak of light that sweeps a sleeve as it moves */
  --record-shade: rgba(0, 0, 0, 0.62);         /* Recent: the sleeve's shadow on the record at its mouth */
  --card-texture-opacity: 0.55;                /* Recent: cardboard relief and fibres on the sleeve */
  --ring-wear: rgba(255, 248, 236, 0.075);     /* Recent: the worn ring the record presses into its sleeve */
  --sleeve-edge-shade: rgba(0, 0, 0, 0.3);     /* Recent: worn, darker sleeve edges and the opening */
  --sleeve-sheen: rgba(255, 255, 255, 0.10);   /* Recent: light catching the sleeve's top-left */
  --sleeve-edge: rgba(255, 255, 255, 0.14);    /* Recent: the sleeve's lit top edge */
  --sleeve-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.75), 0 8px 18px rgba(0, 0, 0, 0.35);
  --text-dim: #5A616B;          /* idle "last touched" dot */

  /* ---------- Borders ---------- */
  --border: #2E333A;            /* default hairline (1px) */
  --border-strong: #3A4048;     /* secondary buttons, inputs, dashed drop zones */
  --border-row: #23272D;        /* table/list row dividers */
  --border-control: #4A5059;    /* unchecked checkbox squares */

  /* ---------- Text ---------- */
  --text-primary: #ECEEF1;
  --text-secondary: #A0A7B1;    /* metadata, captions, labels */
  --text-body-soft: #DADDE2;    /* comment text */
  --text-note: #C7CCD3;         /* quoted notes */
  --text-resolved: #7C838D;     /* resolved comments (with line-through) */

  /* ---------- Brand: ultraviolet ---------- */
  --accent: #9B87FF;            /* primary buttons, active states, WET */
  --accent-hover: #C3B6FF;      /* link hover */
  --on-accent: #140F2E;         /* text/icons on accent fills */

  /* ---------- Wet / dry (always pair color with a text label) ---------- */
  --wet: var(--accent);
  --on-wet: var(--on-accent);
  --dry: #C9D3DD;
  --on-dry: #111316;

  /* ---------- Status ---------- */
  --success: #5CC08A;           /* synced dot, encrypted badge, "Current" */
  --warning: #F0A73A;           /* failed upload, expiring link, form errors */
  --danger-fill: #C9373C;       /* "Remove" confirm button (white text) */
  --danger-bg: #2A1416;         /* "Remove access" hover button */
  --danger-border: #6B2B2E;
  --danger-text: #F2A7A9;
  --on-danger: #FFFFFF;         /* text on --danger-fill */
  --warning-bg: #241E12;        /* export pre-flight warnings (app-only, not in the mockup) */
  --warning-border: #5C4A22;
  --warning-text: #F2CF8A;

  /* ---------- Typography ---------- */
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;  /* BPM, key, sizes, versions, times */
  --text-xs: 11px;    /* uppercase section labels (letter-spacing .08em), badges */
  --text-sm: 12px;    /* metadata */
  --text-md: 13px;    /* chips, secondary buttons */
  --text-base: 14px;  /* body */
  --text-lg: 15px;    /* card titles */
  --text-xl: 16px;    /* app name */
  --text-2xl: 22px;   /* Recent page title */
  --text-3xl: 28px;   /* page titles (Library, project name) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-label: 0.08em;
  --tracking-title: -0.01em;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;   /* tags, badges */
  --radius-sm: 6px;   /* nav items, small buttons */
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 10px;  /* cards, tables */
  --radius-xl: 12px;  /* large cards, popovers */
  --radius-2xl: 16px; /* comment dock, details panel */
  --radius-3xl: 20px; /* Recent crate stage */
  --radius-pill: 999px;

  /* ---------- 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: 240px;
  --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 14px 36px rgba(0, 0, 0, 0.5);
  --shadow-dock: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* ---------- 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-slow: 700ms;    /* crate sleeve flip */
  --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 */
  --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; }
}