/* Audioers design tokens — shared by the customer PWA and the admin panel.
   Derived from the two reference screenshots: deep navy surfaces, violet primary,
   orange / blue / green supporting accents. Change values here, never inline. */
:root {
  /* Surfaces, darkest to lightest */
  --bg-0: #07081a;         /* app background */
  --bg-1: #0d1026;         /* page sections, sidebar */
  --bg-2: #141834;         /* cards */
  --bg-3: #1c2145;         /* raised: inputs, chips, hover */
  --bg-4: #262c58;         /* pressed / selected neutral */
  --line: rgba(160, 170, 255, 0.10);
  --line-strong: rgba(160, 170, 255, 0.20);

  /* Text */
  --text-1: #f4f5ff;
  --text-2: #b6badb;
  --text-3: #7e84ad;
  --text-on-accent: #ffffff;

  /* Brand */
  --violet-400: #9a7bff;
  --violet-500: #7c4dff;   /* primary */
  --violet-600: #6636f0;
  --violet-glow: rgba(124, 77, 255, 0.35);
  --orange-500: #ff8a2a;
  --blue-500: #2f7cff;
  --cyan-400: #35d0ff;
  --green-500: #22c55e;
  --pink-500: #ff3d8b;
  --amber-400: #fbbf24;
  --red-500: #ef4444;

  /* Semantic */
  --accent: var(--violet-500);
  --accent-hover: var(--violet-400);
  --success: var(--green-500);
  --warning: var(--amber-400);
  --danger: var(--red-500);
  --info: var(--cyan-400);
  --coin: #f5a524;

  /* Type. Manrope for Latin; each Indic script falls back to its Noto family.
     :lang() rules in base.css move the matching Noto face to the front. */
  --font-latin: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-indic: "Noto Sans Devanagari", "Noto Sans Kannada", "Noto Sans Tamil", "Noto Sans Telugu",
    "Noto Sans Malayalam", "Noto Sans Bengali", "Noto Sans Gujarati", "Noto Sans Gurmukhi",
    "Noto Sans Oriya", "Noto Nastaliq Urdu";
  --font-sans: var(--font-latin), var(--font-indic), sans-serif;
  --font-num: "Manrope", system-ui, sans-serif; /* tabular figures via font-feature-settings */

  /* Scale (1.2 minor third from 15px body) */
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.9375rem; /* 15 body */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;  /* 28 */
  --fs-3xl: 2.25rem;  /* 36 */
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --lh-indic: 1.7;    /* Indic scripts need taller lines for matras */

  /* Spacing (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Radius: hierarchy, not one value everywhere */
  --r-sm: 8px;     /* chips, inputs */
  --r-md: 12px;    /* list items, small cards */
  --r-lg: 16px;    /* cards, cover art */
  --r-xl: 24px;    /* sheets, hero */
  --r-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-sheet: 0 -12px 40px rgba(0,0,0,0.5);
  --glow-accent: 0 8px 28px var(--violet-glow);

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur: 220ms;

  /* Layout */
  --bottom-nav-h: 64px;
  --mini-player-h: 64px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --content-max: 1280px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}