/* ============================================================
   MASTERFORGE BRAND TOKENS  -  /css/mf-brand.css
   Single source of truth for the --mf-* design system.
   Generated from MASTERFORGE-BRAND-SEED v1.1 (sections 7-13).

   Link on every page, before the page's own <style>:
     <link rel="stylesheet" href="/css/mf-brand.css?v=VERSION">

   Pages bridge their legacy token names to these in their own :root
   (e.g. --accent-primary: var(--mf-cyan-500);). Renaming references
   to --mf-* directly is a later, invisible cleanup.
   ============================================================ */

:root {
  /* -- Brand accents (7.1) ---------------------------------------- */
  --mf-cyan-400: #5ce0ff;   /* hover, bright emphasis */
  --mf-cyan-500: #00d4ff;   /* THE brand accent: links, primary CTA, focus, info */
  --mf-cyan-600: #0099cc;   /* gradient partner, pressed */
  --mf-cyan-a15: rgba(0, 212, 255, 0.15);   /* tint fills, badge backgrounds */
  --mf-cyan-a40: rgba(0, 212, 255, 0.40);   /* glow shadows */

  --mf-gold-400: #e8c868;   /* bright gold: mark gradient end, slider knob, primary Pro action */
  --mf-gold-500: #c9a84c;   /* THE Pro accent: interaction, waveform, EQ curve */
  --mf-gold-600: #8a7535;   /* dim gold: borders, disabled gold, UI only */
  --mf-gold-a12: rgba(201, 168, 76, 0.12);  /* tint fills */
  --mf-gold-a25: rgba(201, 168, 76, 0.25);  /* panel borders */
  --mf-gold-a45: rgba(201, 168, 76, 0.45);  /* hover borders */

  /* -- Status (7.2) - same on all surfaces, status contexts only -- */
  --mf-success: #3ecf72;    /* on target, safe, done, playing */
  --mf-warning: #e8943a;    /* approaching a limit, needs attention */
  --mf-danger-500: #e84057; /* error, peak, destructive (UI + large text) */
  --mf-danger-400: #f2707f; /* error TEXT on any surface */
  --mf-info: #00d4ff;       /* information (same literal as --mf-cyan-500) */

  /* -- Mode (7.3) - the one mode colour ---------------------------- */
  --mf-surgical: #c66fa8;   /* Surgical Cleanup */

  /* -- Surfaces (7.4) - SITE ladder (default) ---------------------- */
  --mf-bg-0: #030508;       /* void: page edges, video bg */
  --mf-bg-1: #0a0f1a;       /* base background */
  --mf-bg-2: #111827;       /* section, panel */
  --mf-bg-3: #161e2e;       /* card, surface */
  --mf-bg-4: #1e293b;       /* elevated, hover */
  --mf-bg-input: #0a0f1a;   /* inset field */

  /* -- Text (7.5) - one ramp, all surfaces ------------------------- */
  --mf-text-1: #f8fafc;         /* headings, body, numeric readouts */
  --mf-text-2: #94a3b8;         /* secondary body, captions, help */
  --mf-text-3: #8b98ab;         /* labels, eyebrows, table sub-labels */
  --mf-text-disabled: #64748b;  /* disabled controls ONLY, never body text */

  /* -- Borders & elevation (7.6) ----------------------------------- */
  --mf-border-subtle: rgba(255, 255, 255, 0.06);
  --mf-border-default: rgba(255, 255, 255, 0.10);
  --mf-border-strong: rgba(255, 255, 255, 0.15);
  --mf-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.30);
  --mf-shadow-2: 0 4px 20px rgba(0, 0, 0, 0.40);
  --mf-shadow-3: 0 8px 40px rgba(0, 0, 0, 0.50);

  /* -- Typography (10) --------------------------------------------- */
  --mf-font-display: 'Outfit', sans-serif;        /* headings */
  --mf-font-body: 'Space Grotesk', sans-serif;    /* body */
  --mf-font-mono: 'JetBrains Mono', monospace;    /* numeric, code */

  /* -- Spacing (12.1): 4 8 12 16 24 32 48 64 96 -------------------- */
  --mf-space-1: 4px;
  --mf-space-2: 8px;
  --mf-space-3: 12px;
  --mf-space-4: 16px;
  --mf-space-5: 24px;
  --mf-space-6: 32px;
  --mf-space-7: 48px;
  --mf-space-8: 64px;
  --mf-space-9: 96px;

  /* -- Radius (12.2) ----------------------------------------------- */
  --mf-radius-sm: 4px;      /* inputs, small buttons, badges */
  --mf-radius-md: 8px;      /* buttons, cards, panels */
  --mf-radius-lg: 12px;     /* docks, modals */
  --mf-radius-xl: 16px;     /* feature cards, hero surfaces */
  --mf-radius-pill: 999px;  /* pills, toggles */

  /* -- Motion (13) ------------------------------------------------- */
  --mf-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);      /* everything, unless below */
  --mf-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);      /* panels/docks entering */
  --mf-ease-linear: linear;                              /* playheads, meters - never eased */
  --mf-dur-micro: 120ms;    /* colour, border, opacity on a control */
  --mf-dur-control: 180ms;  /* toggle, tab, button press */
  --mf-dur-panel: 250ms;    /* dock, modal, accordion */
  --mf-dur-page: 400ms;     /* route change, hero reveal */
}

/* Pro Master surface ladder (7.4). Instruments are darker.
   Activates on the Pro app shell via [data-surface="pro"]. */
[data-surface="pro"] {
  --mf-bg-0: #07080c;
  --mf-bg-1: #0c0e14;
  --mf-bg-2: #10131b;
  --mf-bg-3: #161a25;
  --mf-bg-4: #1c2030;
  --mf-bg-input: #0e1018;
}

/* Focus ring (corrections 6 & 7, section 8.1): every interactive element
   gets a visible focus-visible ring in the surface's interaction accent.
   :where() keeps specificity at 0 so it only fills the gap where a page has
   no focus style of its own; it never overrides an intentional one. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mf-cyan-500);
  outline-offset: 2px;
}
[data-surface="pro"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--mf-gold-500);
}

/* Numeric readouts use tabular figures so meters and metrics stop jittering
   (correction 14). Add .mf-numeric to any element showing dB / LUFS / Hz / ms. */
.mf-numeric { font-variant-numeric: tabular-nums; }