/**
 * OXYVERSE base tokens
 * Palette taken verbatim from the approved dashboard reference:
 *   red #ff2a17 (frames) · orange #ff7b21 (values) · cyan #11c7df (accents)
 * These are the fallback layer; oxyverse-theme.css loads last and refines them.
 */

:root {
  /* ---- core palette (OKY-inspired) ---- */
  --color-bg: #020101;
  --color-bg-elevated: #0a0303;
  --color-surface: rgba(255, 42, 23, 0.06);
  --color-surface-2: rgba(255, 42, 23, 0.1);
  --color-glass: rgba(10, 3, 3, 0.65);
  --color-text: #fff5f2;
  --color-text-muted: rgba(255, 228, 220, 0.62);
  --color-text-faint: rgba(255, 228, 220, 0.34);
  --color-border: rgba(255, 42, 23, 0.16);
  --color-border-strong: rgba(255, 42, 23, 0.32);

  /* primary purple system */
  --color-ice: #ff8a6a;
  --color-ice-deep: #e02010;
  --color-chrome: #ffd4c8;
  --color-cyan: #ff8a6a;
  --color-violet: #ff2a17;
  --color-magenta: #ffa98f;

  --color-purple: #e02010;
  --color-purple-bright: #ff2a17;
  --color-purple-deep: #a01008;
  --color-purple-void: #0a0303;
  --color-purple-soft: rgba(224, 32, 16, 0.14);
  --color-purple-glow: rgba(255, 42, 23, 0.35);

  --color-lime: #ff8a6a;
  --color-lime-soft: rgba(255, 42, 23, 0.12);
  --color-brand: #ff2a17;
  --color-brand-hover: #ff8a6a;
  --color-brand-soft: rgba(255, 42, 23, 0.12);
  --color-brand-glow: rgba(255, 42, 23, 0.35);
  --color-on-brand: #020101;
  --color-success: #2ee6a8;
  --color-error: #ff4d6d;
  --color-warning: #ff7b21;

  /* chrome edge — purple shimmer */
  --holo-gradient: conic-gradient(
    from var(--holo-angle, 140deg),
    rgba(255, 241, 236, 0.9),
    rgba(255, 42, 23, 0.5) 18%,
    rgba(224, 32, 16, 0.3) 40%,
    rgba(255, 42, 23, 0.1) 60%,
    rgba(196, 22, 10, 0.35) 80%,
    rgba(255, 241, 236, 0.9)
  );
  --holo-line: linear-gradient(
    120deg,
    #ffefe9,
    #ff2a17 45%,
    #e02010
  );
  --chrome-text: linear-gradient(
    170deg,
    #fff8f5 0%,
    #ffd4c8 38%,
    #ff2a17 52%,
    #ffefe9 66%,
    #ff8a6a 100%
  );

  /* ---- type ---- */
  --font-display: "Orbitron", "Arial Black", sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-sans: var(--font-body);
  /* numeric face for money / counters — kept separate from --font-mono so a
     future change to code styling doesn't move every balance on the app */
  --font-numeric: "JetBrains Mono", ui-monospace, monospace;

  --text-caption: 0.7rem;
  --text-sm: 0.8125rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-h3: 1.35rem;
  --text-h2: clamp(1.9rem, 4.4vw, 3.4rem);
  --text-h1: clamp(2.4rem, 6.5vw, 5rem);
  --text-display: clamp(2.6rem, 7.5vw, 5.6rem);

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-body: 1.6;
  --tracking-display: 0em;
  --tracking-wide: 0.08em;
  --tracking-label: 0.16em;

  /* ---- space & layout ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 120px;

  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --container: 1440px;
  --section-y: clamp(5rem, 11vw, 8.5rem);
  --measure: 46ch;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;
  --radius-pill: 999px;

  /* ---- motion ---- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-moderate: 400ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease: var(--ease-standard);

  --shadow-2: 0 12px 40px rgba(10, 3, 3, 0.55);
  --shadow-3: 0 24px 80px rgba(3, 1, 1, 0.72);
  --shadow: var(--shadow-3);
  --glow-cyan: 0 0 24px rgba(255, 42, 23, 0.28);
  --glow-violet: 0 0 28px rgba(224, 32, 16, 0.32);
  --focus-ring: 0 0 0 2px #020101, 0 0 0 4px var(--color-purple-bright);

  /* ---- aliases used across app ---- */
  --bg: var(--color-bg);
  --surface: var(--color-bg-elevated);
  --surface-warm: #0f0404;
  --fg: var(--color-text);
  --fg-2: var(--color-text-muted);
  --muted: var(--color-text-muted);
  --faint: var(--color-text-faint);
  --border: var(--color-border);
  --border-soft: rgba(255, 42, 23, 0.08);
  --accent: var(--color-purple-bright);
  --accent-hover: var(--color-brand-hover);
  --accent-soft: var(--color-lime-soft);
  --accent-glow: var(--color-brand-glow);
  --accent-text: var(--color-ice);
  --accent-on: #020101;
  --on-accent: #020101;
  --success: var(--color-success);
  --danger: var(--color-error);
  --warn: var(--color-warning);

  --cx-ink: #020101;
  --cx-stage: #020101;
  --cx-surface: #0a0303;
  --cx-elevated: #0f0404;
  --cx-panel: #140505;
  --cx-hover: #1c0707;
  --cx-line: rgba(255, 42, 23, 0.12);
  --cx-line-strong: rgba(255, 42, 23, 0.28);
  --cx-border: rgba(255, 42, 23, 0.16);
  --cx-border-soft: rgba(255, 42, 23, 0.08);
  --cx-border-strong: rgba(255, 42, 23, 0.4);
  --cx-text: #fff5f2;
  --cx-text-muted: rgba(255, 228, 220, 0.62);
  --cx-text-dim: rgba(255, 228, 220, 0.34);
  --cx-accent: #ff2a17;
  --cx-accent-soft: rgba(255, 42, 23, 0.12);
  --cx-accent-glow: rgba(255, 42, 23, 0.35);
  --cx-violet: #e02010;
  --cx-violet-soft: rgba(224, 32, 16, 0.14);
  --cx-brass: #ff8a6a;
  --cx-brass-deep: #e02010;
  --cx-brass-soft: rgba(255, 138, 106, 0.14);
  --cx-brass-glow: rgba(255, 42, 23, 0.35);
  --cx-success: #2ee6a8;
  --cx-danger: #ff4d6d;
  --cx-warn: #ff7b21;
  --cx-info: #ff2a17;
  --cx-font-display: var(--font-display);
  --cx-font-body: var(--font-body);
  --cx-font-mono: var(--font-mono);
  --cx-radius-sm: 6px;
  --cx-radius: 10px;
  --cx-radius-lg: 14px;
  --cx-radius-xl: 18px;
  --cx-radius-pill: 999px;
  --cx-space-page: var(--gutter);
  --cx-max: 1200px;
  --cx-max-wide: 1440px;
  --cx-ease: var(--ease-standard);
  --cx-duration: 0.25s;
  --cx-shadow: var(--shadow-3);
  --cx-shadow-soft: var(--shadow-2);

  /* sidebar rail (updated by Sidebar.jsx when expanded) */
  --sidebar-rail-width: 72px;
  --sidebar-offset: 100px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-normal: 1ms;
    --duration-moderate: 1ms;
    --duration-slow: 1ms;
  }
}