/**
 * COINX × OKY palette
 * Deep violet void, purple→lavender accents (from okyai.mantrakshdevs.com)
 */

:root {
  /* ---- core palette (OKY-inspired) ---- */
  --color-bg: #0b0614;
  --color-bg-elevated: #130925;
  --color-surface: rgba(172, 75, 255, 0.06);
  --color-surface-2: rgba(172, 75, 255, 0.1);
  --color-glass: rgba(19, 9, 37, 0.65);
  --color-text: #f3eefc;
  --color-text-muted: rgba(220, 210, 245, 0.62);
  --color-text-faint: rgba(220, 210, 245, 0.34);
  --color-border: rgba(172, 75, 255, 0.16);
  --color-border-strong: rgba(172, 75, 255, 0.32);

  /* primary purple system */
  --color-ice: #c4a1ff;
  --color-ice-deep: #7a4aff;
  --color-chrome: #e2d6ff;
  --color-cyan: #c4a1ff;
  --color-violet: #ac4bff;
  --color-magenta: #e879f9;

  --color-purple: #7a4aff;
  --color-purple-bright: #ac4bff;
  --color-purple-deep: #4e0aad;
  --color-purple-void: #130925;
  --color-purple-soft: rgba(122, 74, 255, 0.14);
  --color-purple-glow: rgba(172, 75, 255, 0.35);

  --color-lime: #c4a1ff;
  --color-lime-soft: rgba(172, 75, 255, 0.12);
  --color-brand: #ac4bff;
  --color-brand-hover: #c4a1ff;
  --color-brand-soft: rgba(172, 75, 255, 0.12);
  --color-brand-glow: rgba(172, 75, 255, 0.35);
  --color-on-brand: #0b0614;
  --color-success: #00c758;
  --color-error: #f6339a;
  --color-warning: #f99c00;

  /* chrome edge — purple shimmer */
  --holo-gradient: conic-gradient(
    from var(--holo-angle, 140deg),
    rgba(244, 236, 255, 0.9),
    rgba(172, 75, 255, 0.5) 18%,
    rgba(122, 74, 255, 0.3) 40%,
    rgba(172, 75, 255, 0.1) 60%,
    rgba(113, 38, 221, 0.35) 80%,
    rgba(244, 236, 255, 0.9)
  );
  --holo-line: linear-gradient(
    120deg,
    #f0e8ff,
    #ac4bff 45%,
    #7a4aff
  );
  --chrome-text: linear-gradient(
    170deg,
    #faf5ff 0%,
    #e2d6ff 38%,
    #ac4bff 52%,
    #f0e8ff 66%,
    #c4a1ff 100%
  );

  /* ---- type ---- */
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-body: "Sora", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-sans: var(--font-body);

  --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(19, 9, 37, 0.55);
  --shadow-3: 0 24px 80px rgba(11, 6, 20, 0.72);
  --shadow: var(--shadow-3);
  --glow-cyan: 0 0 24px rgba(172, 75, 255, 0.28);
  --glow-violet: 0 0 28px rgba(122, 74, 255, 0.32);
  --focus-ring: 0 0 0 2px #0b0614, 0 0 0 4px var(--color-purple-bright);

  /* ---- aliases used across app ---- */
  --bg: var(--color-bg);
  --surface: var(--color-bg-elevated);
  --surface-warm: #160b2a;
  --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(172, 75, 255, 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: #0b0614;
  --on-accent: #0b0614;
  --success: var(--color-success);
  --danger: var(--color-error);
  --warn: var(--color-warning);

  --cx-ink: #0b0614;
  --cx-stage: #0b0614;
  --cx-surface: #130925;
  --cx-elevated: #160b2a;
  --cx-panel: #1a0e30;
  --cx-hover: #22123c;
  --cx-line: rgba(172, 75, 255, 0.12);
  --cx-line-strong: rgba(172, 75, 255, 0.28);
  --cx-border: rgba(172, 75, 255, 0.16);
  --cx-border-soft: rgba(172, 75, 255, 0.08);
  --cx-border-strong: rgba(172, 75, 255, 0.4);
  --cx-text: #f3eefc;
  --cx-text-muted: rgba(220, 210, 245, 0.62);
  --cx-text-dim: rgba(220, 210, 245, 0.34);
  --cx-accent: #ac4bff;
  --cx-accent-soft: rgba(172, 75, 255, 0.12);
  --cx-accent-glow: rgba(172, 75, 255, 0.35);
  --cx-violet: #7a4aff;
  --cx-violet-soft: rgba(122, 74, 255, 0.14);
  --cx-brass: #c4a1ff;
  --cx-brass-deep: #7a4aff;
  --cx-brass-soft: rgba(196, 161, 255, 0.14);
  --cx-brass-glow: rgba(172, 75, 255, 0.35);
  --cx-success: #00c758;
  --cx-danger: #f6339a;
  --cx-warn: #f99c00;
  --cx-info: #ac4bff;
  --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;
  }
}