/* tokens.css — @layer order declared here because base.html carries NO inline CSS */
@layer tokens, base, components, pages;

@layer tokens {
:root{
  /* ── Surfaces (one neutral ground; realm never forks the surface) ── */
  --paper: #FAFAF9;
  --surface-raised: #FFFFFF;
  --surface-well: #F2F2F0;
  --ink: #1A1A1A;
  --ink-muted: #6E6A66;
  --faint: #A3A09B;
  --line: #E9E7E3;
  --scrim: rgba(26, 26, 26, .5);

  /* ── Accent — the CTA is ink. There is NO decorative brand colour ── */
  --accent: #1A1A1A;
  --accent-deep: #000000;

  /* ── Realm cues — muted; tags/underlines/tints ONLY, never large fills ── */
  --sage: #6F8F6A;         /* Wellness */
  --sage-deep: #4F6B4A;
  --sage-tint: #EDF1EC;
  --violet: #6E6386;       /* Arcana */
  --violet-deep: #544B68;
  --violet-tint: #EFEDF3;

  /* ── Semantic (never decorative) ── */
  --success: #3F7A4F;
  --danger: #A8443A;

  /* ── Type ── */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-text: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-form: var(--font-text);
  --t-micro: 0.75rem;
  --t-label: 0.875rem;
  --t-body: 1rem;      /* 400/1.6 */
  --t-lede: 1.05rem;
  --t-h3: 1.15rem;
  --t-h2: clamp(1.5rem, 2.5vw, 2rem);
  --t-h1: clamp(2rem, 4vw, 3rem);   /* weight 700, letter-spacing -0.02em */

  /* ── Space / radius / shadow / z ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-sm:6px; --r-card:8px; --r-lg:12px; --r-pill:40px;
  --wrap:1680px;   /* page frame width — header, content, footer all align to this */
  --shadow-card: none;
  --shadow-lift: none;
  --shadow-cta: none;
  --z-sticky:40; --z-chrome:50; --z-drawer:60; --z-overlay:70;

  /* ── Motion — retain durations/easing; no hover-lift/translateY on cards ── */
  --dur-fast:150ms; --dur:240ms; --dur-slow:400ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  /* ── Surface scope (components consume ONLY these) ── */
  --surface: var(--paper);
  --on-surface: var(--ink);
  --on-surface-muted: var(--ink-muted);
  --hairline: var(--line);
  --realm-accent: var(--ink);
  --realm-deep: var(--ink);
  --realm-tint: var(--surface-well);
  --focus-ring: var(--ink);
}

/* Realm = a muted accent cue only. Surface stays neutral for BOTH realms. */
[data-realm="wellness"], .scope-day{
  --realm-accent: var(--sage);
  --realm-deep: var(--sage-deep);
  --realm-tint: var(--sage-tint);
}
[data-realm="arcana"], .scope-night{
  --realm-accent: var(--violet);
  --realm-deep: var(--violet-deep);
  --realm-tint: var(--violet-tint);
}
}