/* ─────────────────────────────────────────────────────────────
   Clyffe — Design system tokens (single source of truth for web apps)
   Mirrors the canonical design system (clyffe-io/design-system, tokens/).
   Consumed by Clyffe.Web and Clyffe.PartnerAdmin.Web via
   _content/Clyffe.DesignSystem/clyffe-tokens.css — do not redefine
   these values in app-level stylesheets.
   ───────────────────────────────────────────────────────────── */
:root {
    /* ── Brand base palette ── */
    --navy: #1e1d79;        /* Deep Navy — primary, structure, authority */
    --white: #ffffff;       /* White — content areas, generous space */
    --ink: #091204;         /* Ink — body text (warm black) */
    --parchment: #fdf0d5;   /* Parchment / Cream — warm surfaces */
    --ember: #d66320;       /* Ember — action & alert (use sparingly) */
    --cove: #468189;        /* Cove — secondary, supporting */

    /* ── Navy tints (structure without harshness) ── */
    --navy-90: rgba(30, 29, 121, 0.90);
    --navy-60: rgba(30, 29, 121, 0.60);
    --navy-40: rgba(30, 29, 121, 0.40);
    --navy-15: rgba(30, 29, 121, 0.15);
    --navy-10: rgba(30, 29, 121, 0.10);
    --navy-08: rgba(30, 29, 121, 0.08);
    --navy-05: rgba(30, 29, 121, 0.05);
    --navy-03: rgba(30, 29, 121, 0.03);

    /* ── Ink tints (text hierarchy on light) ── */
    --ink-90: rgba(9, 18, 4, 0.90);
    --ink-65: rgba(9, 18, 4, 0.65);
    --ink-50: rgba(9, 18, 4, 0.50);
    --ink-40: rgba(9, 18, 4, 0.40);
    --ink-25: rgba(9, 18, 4, 0.25);

    /* ── Cream tints (text hierarchy on navy) ── */
    --cream-90: rgba(253, 240, 213, 0.90);
    --cream-50: rgba(253, 240, 213, 0.50);
    --cream-30: rgba(253, 240, 213, 0.30);

    /* ── White tints (text/structure on navy) ── */
    --white-60: rgba(255, 255, 255, 0.60);
    --white-45: rgba(255, 255, 255, 0.45);
    --white-25: rgba(255, 255, 255, 0.25);
    --white-08: rgba(255, 255, 255, 0.08);

    /* ── Accent tints ── */
    --ember-12: rgba(214, 99, 32, 0.12);
    --ember-08: rgba(214, 99, 32, 0.08);
    --cove-12: rgba(70, 129, 137, 0.12);
    --cove-08: rgba(70, 129, 137, 0.08);
    --parchment-50: rgba(253, 240, 213, 0.50);
    --parchment-30: rgba(253, 240, 213, 0.30);

    /* ── Semantic aliases ── */
    --surface-page: var(--white);
    --surface-canvas: #fafafa;
    --surface-card: var(--white);
    --surface-warm: var(--parchment);
    --surface-inverse: var(--navy);
    --surface-sunken: var(--navy-03);

    --border-hairline: var(--navy-08);
    --border-strong: var(--navy-15);
    --border-inverse: var(--white-08);

    --text-display: var(--navy);
    --text-heading: var(--navy);
    --text-body: var(--ink-65);
    --text-strong: var(--navy);
    --text-muted: var(--ink-40);
    --text-on-navy: var(--white);
    --text-on-navy-muted: var(--white-45);
    --text-label: var(--cove);

    --action-primary: var(--navy);
    --action-primary-text: var(--parchment);
    --action-attention: var(--ember);
    --action-secondary: var(--cove);

    --focus-ring: rgba(70, 129, 137, 0.45);

    /* ── Status (no red/green: healthy is Cove, attention is Ember) ── */
    --status-good: var(--cove);
    --status-good-tint: var(--cove-12);
    --status-attention: var(--ember);
    --status-attention-tint: var(--ember-12);

    /* ── Typography ── */
    --font-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --weight-display-light: 200;
    --weight-display: 300;
    --weight-display-medium: 500;
    --weight-body: 300;
    --weight-body-medium: 500;
    --weight-body-semibold: 600;
    --weight-mono: 400;

    --text-display-size: 40px;
    --text-h1-size: 26px;
    --text-h2-size: 18px;
    --text-body-size: 15px;
    --text-caption-size: 12px;
    --text-mono-size: 11px;

    --leading-display: 1.15;
    --leading-heading: 1.3;
    --leading-body: 1.7;
    --leading-relaxed: 1.8;
    --leading-ui: 1.4;

    --tracking-display: -0.5px;
    --tracking-body: 0;
    --tracking-ui: 0.3px;
    --tracking-label: 3px;
    --tracking-mono: 0.5px;

    /* ── Spacing (8px base — favour the larger end) ── */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;
    --space-9: 128px;

    --pad-card: 28px;
    --pad-card-lg: 40px;
    --gap-content: 24px;
    --gap-section: 96px;
    --row-height: 48px;

    /* ── Radii — small, architectural; pill only for badges/tags/avatars ── */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    /* ── Elevation — cards are flat; shadows for floating layers only ── */
    --shadow-none: none;
    --shadow-raised: 0 1px 2px rgba(30, 29, 121, 0.04);
    --shadow-overlay: 0 8px 28px rgba(9, 18, 4, 0.10), 0 2px 6px rgba(9, 18, 4, 0.05);
    --shadow-dialog: 0 24px 64px rgba(9, 18, 4, 0.18);
    --focus-shadow: 0 0 0 3px var(--focus-ring);

    --border-width: 1px;
    --border-card: 1px solid var(--border-hairline);

    /* ── Motion — nothing snaps; everything flows ── */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-micro: 200ms;
    --duration-panel: 300ms;
    --transition-micro: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
    --transition-panel: all 300ms cubic-bezier(0.65, 0, 0.35, 1);

    --blur-overlay: blur(8px);
    --scrim: rgba(9, 18, 4, 0.32);

    --hover-opacity: 0.85;
    --press-scale: 0.98;

    /* ── Legacy aliases (pre-token app classes) — map, never re-declare ── */
    --clyffe-white: var(--white);
    --clyffe-ink: var(--ink);
    --clyffe-navy: var(--navy);
    --clyffe-ember: var(--ember);
    --clyffe-cove: var(--cove);
    --clyffe-parchment: var(--parchment);
    --clyffe-sand: var(--parchment);
    --clyffe-teal: var(--cove);
    --clyffe-muted: var(--ink-65);
    --clyffe-border: var(--border-hairline);
    --clyffe-warm: var(--parchment-50);
    --font-heading: var(--font-display);
    --clyffe-shadow-sm: var(--shadow-raised);
    --clyffe-shadow-md: var(--shadow-overlay);
    --clyffe-shadow-lg: var(--shadow-dialog);
}