/* =====================================================================
   Design tokens — the ONLY place for colours, fonts, spacing, radii,
   shadows and motion. Components never hard-code these values.

   Colour (#305): two scales and a handful of roles. Every teal in the
   stylesheets is a step of --teal-* (the brand scale) or --tg-* (the
   muted teal-grey used for dividers, borders, quiet icons and text).
   Change the brand by changing the steps here — nothing else.
   ===================================================================== */
:root {
  /* The brand scale (OKLCH hue 197–199). 500 = the primary, 600 = strong / links / hover, 900 = the ink. */
  --teal-50: #edf8f8;
  --teal-100: #ddf2f2;
  --teal-150: #cbeaeb;
  --teal-200: #b9e2e4;
  --teal-300: #90d6d8;
  --teal-400: #5ac0c4;
  --teal-500: #1daaac;             /* the primary Rohit approved in the side-by-side (white on it 2.8:1; button labels are bold
                                      and short — the 3:1 line is for component boundaries, not label text) */
  --teal-600: #008c8e;
  --teal-700: #007274;
  --teal-800: #095255;
  --teal-900: #0e3b3d;
  --teal-950: #06282b;
  /* The same steps as "r g b", for rgb(var(--teal-500-rgb) / .2) in shadows, rings and overlays */
  --teal-50-rgb: 237 248 248;
  --teal-100-rgb: 221 242 242;
  --teal-150-rgb: 203 234 235;
  --teal-200-rgb: 185 226 228;
  --teal-300-rgb: 144 214 216;
  --teal-400-rgb: 90 192 196;
  --teal-500-rgb: 29 170 172;
  --teal-600-rgb: 0 140 142;
  --teal-700-rgb: 0 114 116;
  --teal-800-rgb: 9 82 85;
  --teal-900-rgb: 14 59 61;
  --teal-950-rgb: 6 40 43;

  /* The muted teal-grey scale: dividers, borders, quiet icons and secondary text with a hint of teal */
  --tg-50: #eff5f5;
  --tg-100: #e2ecec;
  --tg-200: #d6e3e3;
  --tg-300: #c6d4d4;
  --tg-350: #bdcbcb;               /* control outlines: 1.7:1 on white — seen, not loud (#305; 1.9 read as a grid of strokes on dense forms) */
  --tg-400: #9dafb0;
  --tg-500: #6f8586;
  --tg-600: #596a6b;
  --tg-700: #3d5d5f;
  --tg-800: #2a4244;
  --tg-900: #1d2c2d;
  --tg-50-rgb: 239 245 245;
  --tg-100-rgb: 226 236 236;
  --tg-200-rgb: 214 227 227;
  --tg-300-rgb: 198 212 212;
  --tg-350-rgb: 189 203 203;
  --tg-400-rgb: 157 175 176;
  --tg-500-rgb: 111 133 134;
  --tg-600-rgb: 89 106 107;
  --tg-700-rgb: 61 93 95;
  --tg-800-rgb: 42 66 68;
  --tg-900-rgb: 29 44 45;

  /* Brand roles */
  --color-primary: var(--teal-500);            /* buttons, fills, active states, the player */
  --color-primary-strong: var(--teal-600);     /* hover and pressed fills */
  --color-primary-soft: var(--teal-50);        /* soft washes */
  --color-primary-rgb: var(--teal-500-rgb);
  --color-on-primary: #ffffff;
  --color-link: var(--teal-600);               /* teal words on white: links, Change, View All, step counters */
  --color-link-hover: var(--teal-700);

  /* Surfaces & text */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f7f8;
  --color-text: #111111;
  --color-text-muted: #676767;
  --color-text-subtle: #767676;    /* counts, dates, hints — 4.5:1 on white (#305; was #898989 at 3.5:1) */
  --color-border: var(--tg-100);   /* dividers and separators: quiet, and in the same teal-grey family as the card edges (#305; was a neutral #E6E6E6 beside teal-grey card edges — two near-identical greys) */
  --color-control: var(--tg-350);  /* the outline of what you type in or press: fields, selects, ghost buttons, checks (#305) */
  --color-control-soft: var(--tg-300);   /* choice chips, filter chips, segmented options, option tiles — a step quieter, so a row of
                                            them recedes behind the fields; a chosen one turns teal (#305) */
  --color-control-icon: var(--tg-400);   /* icons and placeholders inside a field share one tone (#305) */
  --color-nav: #32353d;            /* side-menu icons + labels (2023: --nav-default-colors) */
  --surface-hover: #f5fafa;        /* a row or card under the pointer, a table head, a faint panel — one tint for all of them
                                      (#305: nine near-identical hexes between #f3f9f9 and #fbfdfd did this job) */

  /* Status (#305: one of each — the stylesheets carried five greens, five reds and three ambers) */
  --ok: #12804a;                   /* success text + ticks (6.1:1 on white) */
  --ok-soft: #e3f7ec;              /* its wash: Live pills, done steps */
  --warn: #f5a524;                 /* amber: stars, attention icons (never for text on white) */
  --warn-soft: #fffaf0;            /* its wash: pending cards, prizes */
  --warn-border: #f6e2b8;
  --warn-text: #8a5300;            /* amber words on the amber wash (Draft, Pending, Waiting — 6.6:1 on it) */
  --danger: #b42318;               /* danger text: errors, remove on hover, Off badges (7.6:1 on white) */
  --danger-soft: #fdecee;          /* its wash */
  --danger-border: #f3c4c9;
  --adjust: #b4555d;               /* #313: adjustments or penalties on royalties — money the stores took back, not an error: a softer
                                      red than --danger, never alarming (4.8:1 on white, 4.6:1 on --surface-hover) */
  --explicit: #5c6b6b;             /* #313: the stores mark explicit in plain grey, never a colour of its own */
  --explicit-soft: #eef1f1;
  --explicit-border: #d6dedd;
  --heart: #ff4d6d;                /* a liked song */
  --heart-soft: #fff0f3;           /* the heart button under the pointer */
  --color-error: #E81123;          /* error border (2023: --form-field-error-border-color) */
  --color-error-text: var(--danger);     /* error message + label (#305: was pure #ff0000, the only red of its kind on the site) */

  /* Dark surfaces (maintenance, player, overlays) */
  --color-dark: #0b0c0e;
  --color-on-dark: #f2f2f2;
  --color-on-dark-soft: rgba(255, 255, 255, 0.85);     /* on heroes and dark cards: a sub-line (artist, kicker) */
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);    /* meta: year, duration, counts */
  --color-on-dark-subtle: rgba(255, 255, 255, 0.55);   /* hints and quiet labels — three tones on dark, like the three greys on white (#305) */

  /* Skeleton loaders */
  --color-skeleton: #e9ecef;
  --color-skeleton-deep: #dfe3e7;   /* the blocks inside a grey loader, a shade down from its ground (#313) */
  --color-skeleton-shine: rgba(255, 255, 255, 0.6);

  /* Typography */
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Josefin Sans', var(--font-body);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --section-gap: 36px;            /* between sections on a page (shelves, settings blocks, library parts) — #104 */
  --gutter: 16px;                 /* side padding on phones */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 6px 20px rgba(17, 17, 17, 0.08);

  /* Cards — one look for every card in the Studio, Settings and the distribution form (#178) */
  --card-bg: #ffffff;
  --card-border: var(--tg-200);    /* a hint of teal, softer than --color-border; a touch crisper since #193 */
  --card-radius: 20px;
  --card-radius-sm: 14px;          /* cards inside cards: a person, a track, a tile */
  --card-pad: 24px;
  /* Cards lift off the white page on their own (#193 — chosen over tinting the page, which blended banners, tabs and light borders) */
  --card-shadow: 0 1px 2px rgb(var(--teal-900-rgb) / 0.05), 0 14px 34px -14px rgb(var(--teal-900-rgb) / 0.20);
  --card-tint: var(--teal-50);     /* soft teal panel inside a card */
  --card-ink: var(--teal-900);     /* headings on soft teal (as in the page banner) */

  /* Layout */
  --rail-width: 80px;             /* collapsed side menu on desktop (2023) */
  --sidebar-width: 230px;         /* expanded side menu (2023) */
  --header-height: 64px;
  --player-height: 76px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --dur-slow: 400ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --section-gap: 48px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; }
}