/* ============================================================
   DIAL DESIGNS — Design Tokens
   All values are CSS custom properties so the branding suite
   can override any primitive by targeting :root once.
   ============================================================ */

:root {
  /* ── Primitive ink palette ───────────────────────────── */
  --ink-950: #09090f;
  --ink-900: #0f0f1a;
  --ink-800: #161624;
  --ink-700: #1e1e30;
  --ink-600: #28283e;
  --ink-500: #38385a;
  --ink-400: #55557a;
  --ink-300: #8080a8;
  --ink-200: #b0b0cc;
  --ink-100: #d8d8ec;
  --ink-50:  #f0f0f8;

  /* ── Brand ───────────────────────────────────────────── */
  /* Override --brand-* from your branding suite import */
  --brand-700: #4a40c8;
  --brand-600: #5c52e0;
  --brand-500: #7c6cfc;
  --brand-400: #9d90fc;
  --brand-300: #bfb6fd;
  --brand-glow: rgba(124, 108, 252, 0.18);

  /* ── Product accents ─────────────────────────────────── */
  --sigil-700: #a81527;
  --sigil-600: #cc1f35;
  --sigil-500: #ff2d47;
  --sigil-400: #ff6070;
  --sigil-glow: rgba(255, 45, 71, 0.15);

  --sheek-700: #6b21a8;
  --sheek-600: #8b30d4;
  --sheek-500: #a855f7;
  --sheek-400: #c084fc;
  --sheek-glow: rgba(168, 85, 247, 0.15);

  --aram-700:  #14532d;
  --aram-600:  #16a34a;
  --aram-500:  #22c55e;
  --aram-400:  #4ade80;
  --aram-glow: rgba(34, 197, 94, 0.15);

  --gtarp-700: #92400e;
  --gtarp-600: #b45309;
  --gtarp-500: #f59e0b;
  --gtarp-400: #fbbf24;
  --gtarp-glow: rgba(245, 158, 11, 0.15);

  /* ── Semantic surface ────────────────────────────────── */
  --bg:         var(--ink-950);
  --bg-surface: var(--ink-900);
  --bg-raised:  var(--ink-800);
  --bg-overlay: var(--ink-700);

  /* ── Semantic border ─────────────────────────────────── */
  --border-subtle:  var(--ink-700);
  --border:         var(--ink-600);
  --border-strong:  var(--ink-500);

  /* ── Semantic text ───────────────────────────────────── */
  --text-1: var(--ink-50);
  --text-2: var(--ink-200);
  --text-3: var(--ink-300);
  --text-4: var(--ink-400);

  /* ── Accent shorthand ────────────────────────────────── */
  --accent:     var(--brand-500);
  --accent-dim: var(--brand-600);

  /* ── Typography ──────────────────────────────────────── */
  /* Override --font-display and --font-sans from branding suite */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    900;

  /* ── Spacing (4-point scale) ─────────────────────────── */
  --s-1:  .25rem;
  --s-2:  .5rem;
  --s-3:  .75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* ── Radii ───────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.7);
  --shadow-xl: 0 20px 80px rgba(0,0,0,.8);

  /* ── Motion ──────────────────────────────────────────── */
  --ease-fast:   120ms ease;
  --ease-normal: 220ms ease;
  --ease-slow:   400ms cubic-bezier(.4, 0, .2, 1);

  /* ── Layout ──────────────────────────────────────────── */
  --nav-h:       64px;
  --content-w:   1280px;
  --content-pad: clamp(1rem, 4vw, 2rem);
}