/* ============================================================
   Claura — design tokens (v1.0)
   ------------------------------------------------------------
   Drop this file at the top of your stylesheet entry point, or
   import it directly: @import "claura-tokens.css";

   All product code should consume tokens by var(--name) — never
   hardcode hex values. Tokens are the brand contract.
   ============================================================ */

:root {
  /* ── Color · canvas & surface ────────────────────────────── */
  --claura-bg:                 #121217;   /* primary canvas (dark) */
  --claura-bg-elevated:        #16161D;   /* cards, panels */
  --claura-bg-surface:         #1C1C24;   /* tertiary surface */
  --claura-bg-tint:            #22222D;   /* hover, subtle fills */
  --claura-bg-light:           #F6F6FB;   /* light mode canvas */
  --claura-bg-light-elevated:  #FFFFFF;   /* light mode cards */

  /* ── Color · borders & dividers ──────────────────────────── */
  --claura-border:             #22222D;   /* default border on dark */
  --claura-border-soft:        #1A1A23;   /* subtle divider on dark */
  --claura-border-light:       #E8E8F1;   /* default border on light */
  --claura-border-light-soft:  #F1F1F6;   /* subtle divider on light */

  /* ── Color · text ────────────────────────────────────────── */
  --claura-text:               #E8E8F1;   /* primary text on dark */
  --claura-text-secondary:     #9E9EB2;   /* secondary on dark */
  --claura-text-tertiary:      #5E5E70;   /* metadata, hints */
  --claura-text-on-light:      #1C1C24;   /* primary text on light */
  --claura-text-on-light-secondary: #5E5E70;
  --claura-text-on-accent:     #FFFFFF;   /* text on violet */

  /* ── Color · accent (violet, controlled) ─────────────────── */
  --claura-accent:             #7C6DF2;
  --claura-accent-hover:       #6557D4;
  --claura-accent-pressed:     #5346B8;
  --claura-accent-soft:        #B8AFF7;
  --claura-accent-tint:        rgba(124, 109, 242, 0.16); /* pill bg */
  --claura-accent-glow:        rgba(124, 109, 242, 0.32); /* focus, glow */

  /* ── Color · semantic (use sparingly) ────────────────────── */
  --claura-success:            #1D9E75;
  --claura-warning:            #BA7517;
  --claura-danger:             #E24B4A;
  --claura-info:               var(--claura-accent);

  /* ── Typography ──────────────────────────────────────────── */
  --claura-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Type scale (sizes) */
  --claura-text-xs:   11px;
  --claura-text-sm:   13px;
  --claura-text-base: 15px;
  --claura-text-md:   16px;
  --claura-text-lg:   18px;
  --claura-text-xl:   24px;
  --claura-text-2xl:  32px;
  --claura-text-3xl:  40px;
  --claura-text-4xl:  56px;
  --claura-text-5xl:  72px;

  /* Type tracking */
  --claura-tracking-label:   0.015em;    /* quiet metadata labels */
  --claura-tracking-tight:  -0.015em;
  --claura-tracking-tighter:-0.025em;
  --claura-tracking-display:-0.04em;     /* display sizes */
  --claura-tracking-wordmark:-0.05em;    /* "claura" wordmark only */

  /* Type weights — TWO weights only, by policy */
  --claura-weight-regular: 400;
  --claura-weight-medium:  500;

  /* Line heights */
  --claura-leading-tight:   1.05;
  --claura-leading-snug:    1.25;
  --claura-leading-normal:  1.55;
  --claura-leading-relaxed: 1.7;

  /* ── Spacing (4px base) ──────────────────────────────────── */
  --claura-space-0:    0;
  --claura-space-1:    4px;
  --claura-space-2:    8px;
  --claura-space-3:   12px;
  --claura-space-4:   16px;
  --claura-space-5:   20px;
  --claura-space-6:   24px;
  --claura-space-8:   32px;
  --claura-space-10:  40px;
  --claura-space-12:  48px;
  --claura-space-16:  64px;
  --claura-space-20:  80px;
  --claura-space-24:  96px;
  --claura-space-32: 128px;

  /* ── Border radius ───────────────────────────────────────── */
  --claura-radius-0:   0;
  --claura-radius-sm:  6px;
  --claura-radius:    12px;
  --claura-radius-md: 12px;
  --claura-radius-button: 16px;
  --claura-radius-button-sm: 14px;
  --claura-radius-lg: 20px;
  --claura-radius-xl: 28px;
  --claura-radius-full: 9999px;
  --claura-radius-app-icon: 22.37%;   /* iOS / macOS tile mask */

  /* ── Motion ──────────────────────────────────────────────── */
  --claura-ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --claura-ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --claura-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --claura-duration-fast:  160ms;
  --claura-duration-base:  240ms;
  --claura-duration-slow:  400ms;
  --claura-duration-page:  1200ms;     /* hero/page reveals */
  --claura-stagger:        80ms;       /* rail-by-rail stagger */
  --claura-pulse-loop:    2800ms;      /* signal pulse cycle */

  /* ── Shadows · used sparingly ────────────────────────────── */
  --claura-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.20);
  --claura-shadow:     0 4px 12px -2px rgba(0, 0, 0, 0.32);
  --claura-shadow-lg:  0 12px 32px -8px rgba(0, 0, 0, 0.55);
  --claura-shadow-focus: 0 0 0 3px var(--claura-accent-glow);

  /* ── Z-index ─────────────────────────────────────────────── */
  --claura-z-base:        1;
  --claura-z-dropdown:  100;
  --claura-z-sticky:    200;
  --claura-z-modal:    1000;
  --claura-z-toast:    1100;
}

/* Light-mode overrides — flip canvas + ink, keep accent constant. */
[data-theme="light"] {
  --claura-bg:                 var(--claura-bg-light);
  --claura-bg-elevated:        var(--claura-bg-light-elevated);
  --claura-bg-surface:         #F1F1F6;
  --claura-bg-tint:            #EAEAF1;
  --claura-border:             var(--claura-border-light);
  --claura-border-soft:        var(--claura-border-light-soft);
  --claura-text:               var(--claura-text-on-light);
  --claura-text-secondary:     var(--claura-text-on-light-secondary);
  --claura-text-tertiary:      #8C8C9E;
}