/*
 * tokens.css — Why Do You Create? design tokens
 * Single source of truth for colors, typography, spacing, and motion.
 * Import this on every page. Override per-page only when intentionally different.
 *
 * Naming: canonical names come first, aliases follow.
 * New code should use the canonical (left column) names.
 *
 *   Canonical        Aliases
 *   --bg             --bg-void
 *   --text           --text-primary
 *   --text-2         --text-secondary
 *   --text-3         --text-muted
 *   --text-4         --text-dim
 *   --text-5         --text-whisper
 *   --blue           --accent, --accent-warm
 *   --blue-s         --accent-dim, --accent-soft, --blue-dim
 *   --card-bg        --card
 *   --card-border    --border
 */

:root {
    /* ── Foundation ── */
    --bg: #07070a;
    --bg-void: #07070a;

    /* ── Text hierarchy ── */
    --text:           rgba(255, 253, 250, 1);
    --text-primary:   rgba(255, 253, 250, 1);

    --text-2:         rgba(255, 253, 250, 0.75);
    --text-secondary: rgba(255, 253, 250, 0.75);

    --text-3:         rgba(255, 253, 250, 0.6);
    --text-muted:     rgba(255, 253, 250, 0.6);

    --text-4:         rgba(255, 253, 250, 0.48);
    --text-dim:       rgba(255, 253, 250, 0.48);

    --text-5:         rgba(255, 253, 250, 0.55);
    --text-whisper:   rgba(255, 253, 250, 0.55);

    /* ── Blue accent ── */
    --blue:           #82afff;
    --accent:         rgba(130, 175, 255, 1);
    --accent-warm:    rgba(130, 175, 255, 1);

    --blue-s:         rgba(130, 175, 255, 0.12);
    --blue-dim:       rgba(130, 175, 255, 0.15);
    --accent-dim:     rgba(130, 175, 255, 0.15);
    --accent-soft:    rgba(130, 175, 255, 0.12);

    --blue-f:         rgba(130, 175, 255, 0.7);

    /* ── Green ── */
    --green:          #8dffc0;
    --green-s:        rgba(141, 255, 192, 0.10);
    --green-dim:      rgba(141, 255, 192, 0.10);
    --green-soft:     rgba(141, 255, 192, 0.10);
    --green-f:        rgba(141, 255, 192, 0.6);

    /* ── Amber ── */
    --amber:          #ffc78f;
    --amber-s:        rgba(255, 199, 143, 0.12);
    --amber-dim:      rgba(255, 199, 143, 0.12);
    --amber-soft:     rgba(255, 199, 143, 0.12);
    --amber-f:        rgba(255, 199, 143, 0.7);

    /* ── Rose ── */
    --rose:           #ffa0a0;
    --rose-s:         rgba(255, 160, 160, 0.10);
    --rose-dim:       rgba(255, 160, 160, 0.10);
    --rose-soft:      rgba(255, 160, 160, 0.10);
    --rose-f:         rgba(255, 160, 160, 0.6);

    /* ── Glass surfaces ── */
    --glass:          rgba(255, 252, 248, 0.035);
    --glass-2:        rgba(255, 252, 248, 0.055);
    --glass-3:        rgba(255, 252, 248, 0.08);
    --glass-border:   rgba(255, 252, 248, 0.08);
    --glass-border-h: rgba(255, 252, 248, 0.14);

    /* ── Card surfaces ── */
    --card-bg:        rgba(255, 255, 255, 0.03);
    --card:           rgba(255, 255, 255, 0.03);
    --card-border:    rgba(255, 255, 255, 0.06);
    --border:         rgba(255, 255, 255, 0.06);

    /* ── Shape ── */
    --radius-lg: 12px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --radius-xs: 4px;

    /* ── Motion ── */
    --ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
}