/* ARTIST CNTRL — design tokens (CANONICAL)
 * ════════════════════════════════════════════════════════════════
 * Single source of truth for desktop surfaces. Both the artist app
 * (app.html) AND the roster shell (roster.html) load this file.
 *
 * Naming: shorter, semantic. `ink` for text, `paper` for cards,
 * `line` for borders, `p-instagram` etc. for platform accents.
 *
 * Mobile has its own /m/css/m-tokens.css for now. Phase 1.5: unify
 * mobile into this file too.
 *
 * NEVER hardcode colors / sizes / spacing — always reference a token.
 * ════════════════════════════════════════════════════════════════ */
:root {
  /* ─── COLOR ─────────────────────────────────────── */
  /* Canvas / surfaces */
  --ac-color-bg:           #efefee;            /* page bg — cool light gray */
  --ac-color-glow:         #f5f5f4;            /* gentle corner wash */
  --ac-color-paper:        #ffffff;            /* cards, panels */
  --ac-color-nested:       #f0ede6;            /* nested panels */
  --ac-color-warm:         #ece9e3;            /* soft accent surface */
  --ac-color-warm-shadow:  #ddd9d3;            /* accent shadow */
  --ac-color-inverse:      #0e0c0b;            /* dark cards (spotlight) */
  /* Legacy alias — kept so any straggler refs don't break.
     New code should use `transparent` directly. */
  --ac-color-surface:      transparent;
  /* Raised surface — solid white card/sheet background used by every
     elevated panel (mobile bottom sheets, dashboard cards, stat tiles,
     etc.). This token was dropped during a previous refactor; without
     it, every reference resolves to nothing and the containers render
     as transparent shells on top of the page bg. Restored to #fff so
     all cards across desktop + mobile recover their white backgrounds. */
  --ac-color-surface-raised: #ffffff;
  /* Page background for mobile screens. Used as body bg + m-body bg on
     every /m/ page (contacts, profile, show-new, dashboard, etc.).
     Same role as --ac-color-bg above but the mobile codebase reaches
     for `canvas`; aliasing here so both work and white cards still pop
     against the page tint. */
  --ac-color-canvas:        #efefee;
  /* Generic "card" surface — referenced by the roster widget, task
     drawer, booking adapter, etc. White solid so cards stand out
     against the page bg. */
  --ac-color-card:          #ffffff;

  /* ────────────────────────────────────────────────────────────────
     Legacy aliases used by the /m/ mobile codebase. The active
     desktop palette uses --ac-color-ink / --ac-color-t2 / etc; the
     mobile CSS reaches for primary/secondary/tertiary names. Aliased
     here so both naming schemes resolve to the same colors and we
     don't repeat the "missing token → invisible UI" regression.
     ──────────────────────────────────────────────────────────────── */
  --ac-color-text-primary:   #0e0c0b;            /* same as --ac-color-ink */
  --ac-color-text-secondary: #6c6a6a;            /* same as --ac-color-t2 */
  --ac-color-text-tertiary:  #98979a;            /* same as --ac-color-t3 */
  --ac-color-border:         rgba(0, 0, 0, 0.07);  /* same as --ac-color-line */
  --ac-color-border-strong:  rgba(0, 0, 0, 0.12);  /* same as --ac-color-line-strong */
  --ac-color-surface-warm:   #ece9e3;            /* same as --ac-color-warm */
  --ac-color-accent-muted:   rgba(139, 26, 43, 0.12);
  /* Alternate canvas tints — used for striped lists, subtle washes. */
  --ac-color-canvas-alt:     #e7e7e6;
  --ac-color-canvas-glow:    rgba(139, 26, 43, 0.04);

  /* Borders */
  --ac-color-line:         rgba(0, 0, 0, 0.07);
  --ac-color-line-strong:  rgba(0, 0, 0, 0.12);
  --ac-color-line-subtle:  rgba(0, 0, 0, 0.04);
  --ac-color-ring:         rgba(139, 26, 43, 0.32);

  /* Text */
  --ac-color-ink:          #0e0c0b;
  --ac-color-body:         #28282a;
  --ac-color-t2:           #6c6a6a;
  --ac-color-t3:           #98979a;
  --ac-color-muted:        #aeacae;
  --ac-color-disabled:     #c5c4c4;
  --ac-color-on-accent:    #ffffff;
  /* Used for text on dark surfaces — kept since label tokens didn't
     have an equivalent. */
  --ac-color-text-subtle:  rgba(255, 255, 255, 0.7);

  /* Accent — AC crimson */
  --ac-color-accent:       #8B1A2B;
  --ac-color-accent-hi:    #a82238;
  --ac-color-accent-chip:  rgba(139, 26, 43, 0.12);
  --ac-color-accent-glow:  rgba(139, 26, 43, 0.35);
  --ac-color-accent-wash:  rgba(139, 26, 43, 0.06);

  /* Status */
  --ac-color-success:      #22c55e;
  --ac-color-success-bg:   rgba(34, 197, 94, 0.12);
  --ac-color-success-ink:  #157a3a;
  --ac-color-warning:      #f9a825;
  --ac-color-warning-bg:   rgba(249, 168, 37, 0.12);
  --ac-color-warning-ink:  #a86b00;
  --ac-color-danger:       #ef4444;
  --ac-color-danger-bg:    rgba(239, 68, 68, 0.10);
  --ac-color-info:         #3b82f6;
  --ac-color-info-bg:      rgba(59, 130, 246, 0.12);

  /* Platform accents (only inside per-DSP / per-platform UI) */
  --ac-color-p-spotify:    #22c55e;
  --ac-color-p-instagram:  #ec407a;
  --ac-color-p-facebook:   #1d4ed8;
  --ac-color-p-youtube:    #ef4444;
  --ac-color-p-tiktok:     #0e0c0b;
  --ac-color-p-threads:    #0e0c0b;
  --ac-color-p-amazon:     #22d3ee;
  --ac-color-p-apple:      #ec407a;
  --ac-color-p-tidal:      #000000;
  --ac-color-p-pandora:    #00a0ee;

  /* ─── TYPOGRAPHY ────────────────────────────────── */
  --ac-font-display: 'Archivo Black', 'Inter', system-ui, sans-serif;
  --ac-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ac-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weight scale */
  --ac-fw-regular:  400;
  --ac-fw-medium:   500;
  --ac-fw-semibold: 600;
  --ac-fw-bold:     700;
  --ac-fw-black:    900;

  /* Font sizes */
  --ac-fs-2xs:  9px;
  --ac-fs-xs:   10px;
  --ac-fs-sm:   11px;
  --ac-fs-base: 12px;
  --ac-fs-md:   13px;
  --ac-fs-lg:   14px;
  --ac-fs-xl:   16px;
  --ac-fs-2xl:  18px;
  --ac-fs-3xl:  22px;
  --ac-fs-4xl:  26px;
  --ac-fs-5xl:  32px;

  /* Letter spacing */
  --ac-tracking-tighter: -0.02em;
  --ac-tracking-tight:   -0.01em;
  --ac-tracking-normal:  0;
  --ac-tracking-wide:    0.04em;
  --ac-tracking-wider:   0.08em;
  --ac-tracking-widest:  0.14em;
  --ac-tracking-mega:    0.18em;

  /* Line heights */
  --ac-leading-tight:   1.2;
  --ac-leading-snug:    1.35;
  --ac-leading-normal:  1.45;
  --ac-leading-relaxed: 1.6;

  /* ─── SPACING ───────────────────────────────────── */
  /* Scale is non-contiguous on purpose — the numbers correspond to
     multiples of 4px (so --ac-space-8 = 32px, --ac-space-10 = 40px,
     --ac-space-14 = 56px). Old code used --ac-space-7/8/9 for the
     same values; those have been migrated to --ac-space-8/10/14. */
  --ac-space-0:  0;
  --ac-space-1:  4px;
  --ac-space-2:  8px;
  --ac-space-3:  12px;
  --ac-space-4:  16px;
  --ac-space-5:  20px;
  --ac-space-6:  24px;
  --ac-space-8:  32px;
  --ac-space-10: 40px;
  --ac-space-14: 56px;

  /* ─── RADIUS ────────────────────────────────────── */
  --ac-radius-xs:    4px;
  --ac-radius-sm:    8px;
  --ac-radius-md:    12px;
  --ac-radius-lg:    16px;
  --ac-radius-xl:    20px;
  --ac-radius-2xl:   24px;
  --ac-radius-3xl:   28px;
  --ac-radius-pill:  999px;
  --ac-radius-circle: 50%;

  /* ─── SHADOWS ───────────────────────────────────── */
  --ac-shadow-sm:     0 1px 3px rgba(50, 20, 15, 0.06);
  --ac-shadow-md:     0 10px 30px -15px rgba(50, 20, 15, 0.12);
  --ac-shadow-lg:     0 30px 80px -30px rgba(50, 20, 15, 0.25);
  --ac-shadow-card:   0 10px 30px -15px rgba(50, 20, 15, 0.08);
  --ac-shadow-accent: 0 4px 14px -4px rgba(50, 20, 15, 0.4);
  --ac-shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* ─── MOTION ────────────────────────────────────── */
  --ac-duration-fast:    120ms;
  --ac-duration-base:    200ms;
  --ac-duration-slow:    300ms;
  --ac-ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ac-ease-emphasized:  cubic-bezier(0.3, 0, 0, 1.2);

  /* ─── LAYOUT ────────────────────────────────────── */
  --ac-container-max:   1680px;
  --ac-container-pad:   24px;
  --ac-shell-pad:       40px;

  /* Z-index scale */
  --ac-z-base:    0;
  --ac-z-raised:  10;
  --ac-z-overlay: 100;
  --ac-z-modal:   500;
  --ac-z-toast:   1000;
}

/* ════════════════════════════════════════════════════════════════
   BASE BOOTSTRAP — body reset + small utility classes that the
   roster shell (and any new surface) needs to render at all.
   Used to live in /label/css/tokens.css which got folded into here.
   Wrapped in :where() / scoped where possible so this doesn't fight
   the artist app's existing resets.
   ════════════════════════════════════════════════════════════════ */

/* Box-sizing reset — safe across the whole site. */
*, *::before, *::after { box-sizing: border-box; }

/* Body baseline — only applied where no other body styles exist.
   The artist app sets its own body styles in dashboard.css that
   override these. */
html, body { margin: 0; padding: 0; }
body {
  background: var(--ac-color-bg);
  color: var(--ac-color-ink);
  font-family: var(--ac-font-body);
  font-size: var(--ac-fs-md);
  line-height: 1.45;
  font-feature-settings: 'cv11','ss01','tnum';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--ac-color-accent-chip); }

/* Small utility classes used in markup across surfaces. */
.ac-mono { font-family: var(--ac-font-mono); font-variant-numeric: tabular-nums; }
.ac-disp { font-family: var(--ac-font-display); letter-spacing: -0.01em; }
.ac-tnum { font-variant-numeric: tabular-nums; }

/* Tab visibility helper used by the roster shell's shell.js — toggles
   the .is-active class on the section being shown. WITHOUT these rules
   all tabs render stacked as one page. */
.tab-content { display: none; }
.tab-content.is-active { display: block; }