/*
  ASCENDOJO DESIGN TOKENS
  -----------------------
  Layer 1: shell tokens — the neutral, permanent identity of the outer app
  (graphite / off-white / silver). No Dojo may override these.

  Layer 2: --dojo-accent — the only color a Dojo is allowed to inject, and
  only inside its own view (body[data-dojo="..."] sets it). Outside a Dojo
  context it falls back to a neutral silver so the shell never looks
  "colorless-by-mistake" vs. "colorless-on-purpose".

  New Dojo = one new [data-dojo="x"] block below. Nothing else in this file
  changes.
*/

:root {
  /* ── Shell surfaces ── */
  --shell-bg: #0a0a0b;
  --shell-bg-raised: #131315;
  --shell-surface: #17181b;
  --shell-surface-2: #1e2023;
  --shell-surface-hover: #212327;

  /* ── Shell ink ── */
  --shell-ink: #f3f1ec;
  --shell-ink-dim: #c9c7c1;
  --shell-ink-muted: #9a9ea4;
  --shell-ink-faint: #6c6f74;

  /* ── Borders ── */
  --shell-border: rgba(255, 255, 255, 0.08);
  --shell-border-strong: rgba(255, 255, 255, 0.16);
  --shell-border-hairline: rgba(255, 255, 255, 0.05);

  /* ── Metallic accent (shell's own "color") ── */
  --shell-metal-100: #e4e6ea;
  --shell-metal-300: #b9bcc3;
  --shell-metal-500: #82858c;
  --shell-metal-700: #4b4d52;

  /* ── Shell-level semantic accents ── */
  /* Orange: energy / premium / locked / primary CTA. */
  --accent-orange: #ff6b00;
  --accent-orange-ink: #0a0a0b;
  --accent-orange-soft: rgba(255, 107, 0, 0.14);
  --accent-orange-glow: rgba(255, 107, 0, 0.45);
  /* Green: free / positive / live / active. */
  --accent-green: #34d399;
  --accent-green-ink: #06120d;
  --accent-green-soft: rgba(52, 211, 153, 0.14);
  --accent-green-glow: rgba(52, 211, 153, 0.4);

  /* ── Semantic (system, not brand) ── */
  --state-success: var(--accent-green);
  --state-success-ink: #bdf0d8;
  --state-danger: #e0605a;
  --state-danger-ink: #f6c9c6;
  --state-locked: #55585d;

  /* ── Default Dojo accent (neutral, used only outside any Dojo) ── */
  --dojo-accent: var(--shell-metal-300);
  --dojo-accent-ink: #0a0a0b;
  --dojo-accent-soft: rgba(185, 188, 195, 0.14);

  /* ── Glass card system ── */
  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bg-raised: rgba(255, 255, 255, 0.05);
  --glass-border: var(--shell-border);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --glass-blur: 20px;
  --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);

  /* ── Radius scale ── */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── Elevation ── */
  --shadow-sm: 0 6px 16px -8px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 20px 40px -16px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 40px 90px -24px rgba(0, 0, 0, 0.75);

  /* ── Type ── */
  --font-display: "General Sans", "Switzer", "Space Grotesk", -apple-system, "Segoe UI",
    sans-serif;
  --font-body: "Outfit", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ── Motion (single authored signature: the "ascend" rise) ── */
  --ease-ascend: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-ascend: 620ms;

  /* ── Section rhythm ── */
  --space-section: clamp(64px, 9vw, 128px);
}

/* ── Per-Dojo accent tokens ──
   Set on the element that wraps a Dojo's context (body[data-dojo] or a
   .dojo-scope container). Only color values live here — everything else
   (radius, type, motion) stays inherited from the shell. */

[data-dojo="trading"] {
  --dojo-accent: #ff6b00;
  --dojo-accent-ink: #0a0a0b;
  --dojo-accent-soft: rgba(255, 107, 0, 0.14);
}

[data-dojo="ecommerce"] {
  --dojo-accent: #2fb8a3;
  --dojo-accent-ink: #06110f;
  --dojo-accent-soft: rgba(47, 184, 163, 0.14);
}

[data-dojo="fitness"] {
  --dojo-accent: #c9433f;
  --dojo-accent-ink: #120706;
  --dojo-accent-soft: rgba(201, 67, 63, 0.14);
}