/* ============================================================================
   AudioRoute — Design Tokens (web copy of design/tokens.css)
   Single source of truth, derived from the SHIPPING APP UI
   (native/app/tray/LookAndFeel.h + native/app/vst/PluginEditor.h).
   Rule: if a value isn't defined here, it doesn't ship. No ad-hoc hex.
   ============================================================================ */

/* Display face — self-hosted Jost (open Futura revival). Latin + latin-ext. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jost-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/jost-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Neutrals — TRUE neutral charcoal (no blue tint), straight from the app --- */
  --ar-ink:        #121212; /* app kInset      — deepest wells, meter tracks, insets */
  --ar-bg:         #1E1E1E; /* app kBackground — primary page canvas               */
  --ar-panel:      #2A2A2A; /* app kSurface    — raised panels / modules           */
  --ar-panel-2:    #242426; /* app sidebar bg  — secondary panel                   */
  --ar-line:       #3A3A3A; /* app kBorder     — hairline borders (1px)            */
  --ar-line-2:     #555555; /* app kToggleOff  — stronger divider                  */

  /* --- Text --- */
  --ar-text:       #E0E0E0;
  --ar-text-2:     #888888;
  --ar-text-3:     #6A6A6A;

  /* --- Brand accents --- */
  --ar-blue:       #0A84FF; /* PRIMARY: links, primary actions, interactive. FLAT. */
  --ar-record:     #E0655C; /* SIGNATURE: record, key emphasis, brand moments.    */

  /* --- Functional signals (hardware-LED semantics) --- */
  --ar-green:      #4CAF50;
  --ar-amber:      #E8A33D;
  --ar-red:        #F44336;

  /* --- Derived tints (never invent new ones) --- */
  --ar-blue-12:    rgba(10,132,255,0.12);
  --ar-blue-24:    rgba(10,132,255,0.24);
  --ar-record-12:  rgba(224,101,92,0.12);
  --ar-record-24:  rgba(224,101,92,0.24);

  /* --- Type --- */
  --ar-font-display: "Jost", "Futura", "Century Gothic", var(--ar-font-sans);
  --ar-font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --ar-font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ar-tracking-display: -0.02em;
  --ar-tracking-label:    0.12em;

  /* --- Radius scale (sharp; matches the app's tactile controls). Max 6px. --- */
  --ar-r-0: 0px; --ar-r-1: 2px; --ar-r-2: 4px; --ar-r-3: 6px;

  /* --- Spacing (4px base) --- */
  --ar-s-1: 4px;  --ar-s-2: 8px;  --ar-s-3: 12px; --ar-s-4: 16px;
  --ar-s-5: 24px; --ar-s-6: 32px; --ar-s-7: 48px; --ar-s-8: 64px;

  /* --- Borders --- */
  --ar-border: 1px solid var(--ar-line);

  /* --- LED glow (functional only) --- */
  --ar-glow-green:  0 0 8px 1px rgba(76,175,80,0.7);
  --ar-glow-record: 0 0 8px 1px rgba(224,101,92,0.7);
  --ar-glow-amber:  0 0 8px 1px rgba(232,163,61,0.7);
  --ar-glow-blue:   0 0 8px 1px rgba(10,132,255,0.7);

  /* --- Accessibility (never remove) --- */
  --ar-focus:       2px solid var(--ar-blue);
  --ar-focus-offset: 2px;
  --ar-touch-min:   44px;
}

/* Apply the focus ring globally by default — opt out only with cause. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--ar-focus);
  outline-offset: var(--ar-focus-offset);
}