/* ARTIST CNTRL — design tokens
 * Light mode only. All variables prefixed --ac-.
 * Pull from these in every component — never hardcode.
 */

:root {
  /* ─── COLOR ─────────────────────────────────────── */
  /* Surfaces — cool neutral grays, deep red accent.
     Moved away from warm parchment/brown tones so the crimson pops. */
  --ac-color-canvas:           #efefee;            /* page bg — cool light gray */
  --ac-color-canvas-glow:      #f5f5f4;            /* gentle corner wash */
  --ac-color-surface:          transparent;        /* frame disabled — was the page card */
  --ac-color-surface-raised:   #ffffff;            /* cards, panels — pure white */
  --ac-color-surface-overlay:  #f0ede6;            /* nested panels — slight off-white */
  --ac-color-surface-inverse:  #0e0c0b;            /* dark cards (spotlight) */
  --ac-color-surface-warm:     #ece9e3;            /* soft accent surface */
  --ac-color-surface-warm-deep:#ddd9d3;            /* accent shadow */

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

  /* Text — cooler neutral grays (less brown) */
  --ac-color-text-primary:     #0e0c0b;
  --ac-color-text-body:        #28282a;
  --ac-color-text-secondary:   #6c6a6a;
  --ac-color-text-tertiary:    #98979a;
  --ac-color-text-muted:       #aeacae;
  --ac-color-text-subtle:      rgba(255,255,255,0.7);
  --ac-color-text-disabled:    #c5c4c4;
  --ac-color-text-on-accent:   #ffffff;

  /* Accent — crimson */
  --ac-color-accent:           #8B1A2B;
  --ac-color-accent-hover:     #a82238;
  --ac-color-accent-muted:     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-warning:          #f9a825;
  --ac-color-warning-bg:       rgba(249, 168, 37, 0.12);
  --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 (used by per-platform UI) */
  --ac-color-platform-spotify: #22c55e;
  --ac-color-platform-instagram: #ec407a;
  --ac-color-platform-facebook: #1d4ed8;
  --ac-color-platform-youtube: #ef4444;
  --ac-color-platform-tiktok:  #0e0c0b;
  --ac-color-platform-threads: #0e0c0b;
  --ac-color-platform-amazon:  #22d3ee;
  --ac-color-platform-apple:   #ec407a;
  --ac-color-platform-tidal:   #000000;
  --ac-color-platform-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-weight-regular: 400;
  --ac-weight-medium:  500;
  --ac-weight-semibold: 600;
  --ac-weight-bold:    700;
  --ac-weight-black:   900;

  /* Size scale */
  --ac-text-2xs:  9px;
  --ac-text-xs:   10px;
  --ac-text-sm:   11px;
  --ac-text-base: 12px;
  --ac-text-md:   13px;
  --ac-text-lg:   14px;
  --ac-text-xl:   16px;
  --ac-text-2xl:  18px;
  --ac-text-3xl:  22px;
  --ac-text-4xl:  26px;
  --ac-text-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 (0–9 step scale) ──────────────────── */
  --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-7: 32px;
  --ac-space-8: 40px;
  --ac-space-9: 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;   /* widened — matches CD reference render */
  --ac-container-pad:   24px;
  --ac-shell-pad:       40px;     /* more breathing room inside the pearl card */

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