/**
 * youfree — Design Tokens (shared system)
 * ─────────────────────────────────────────────
 * Single source of truth for colors, type, radius, motion. Loaded before
 * landing.css and reusable by any other surface (email web views, embeds).
 * "Aurora Glass": one brand blue, cool ink, glass surfaces, a warm "live" spark.
 */

:root {
    /* Brand + accents (light, lively) */
    --blue:        #1E90FF;
    --blue-deep:   #0A66D6;
    --cyan:        #34D6E0;
    --teal:       #0EA5A9;
    --pink:        #FF8FB0;

    --ink:         #0A1A33;   /* headings */
    --text:        #2A3A52;   /* body */
    --muted:       #5C7089;   /* captions */
    --hint:        #93A4BC;

    --paper:       #EEF4FF;   /* base behind the aurora */
    --line:        rgba(15, 50, 110, 0.10);
    --aurora-bg:   linear-gradient(180deg, #F4F8FF 0%, #EAF1FF 100%);
    --field-bg:        rgba(255, 255, 255, 0.7);   /* inputs + small controls */
    --field-bg-focus:  #ffffff;
    --like:        #FF3B5C;   /* liked heart (red, not brand blue) */
    --sk-base:     rgba(15, 50, 110, 0.07);
    --sk-hi:       rgba(15, 50, 110, 0.13);

    /* Glass — strong is near-opaque so menus/sheets/dialogs/cards stay readable */
    --glass:        rgba(255, 255, 255, 0.70);
    --glass-strong: rgba(255, 255, 255, 0.93);
    --glass-border: rgba(217, 217, 217, 0.7);
    --glass-blur:   blur(22px) saturate(170%);
    --glass-shadow: 0 24px 60px -22px rgba(20, 60, 130, 0.35);
    --glass-shadow-sm: 0 10px 30px -16px rgba(20, 60, 130, 0.30);

    --grad-brand: linear-gradient(120deg, #2C99FF 0%, #34D6E0 100%);
    --grad-text:  linear-gradient(100deg, #1E90FF 0%, #2C99FF 50%, #34D6E0 100%);

    --radius:    1.5rem;
    --radius-lg: 2rem;
    --radius-xl: 2.5rem;
    --pill:      999px;

    /* Type — display + body via Fontshare; eyebrow gets its own family */
    --font-display: 'Clash Display', 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ar:      'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --font-eyebrow: 'Momo Trust Display', var(--font-display);

    --container: 1200px;
    --pad: 1.5rem;
    --ease: 280ms cubic-bezier(0.33, 0.1, 0.2, 1);
    --ease-soft: 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Dark theme — overrides only the surface + text tokens ── */
:root[data-theme="dark"] {
    /* Brighter blues so links, active nav, focus rings + accents stay legible on dark */
    --blue:        #4DA6FF;
    --blue-deep:   #84C2FF;

    --ink:   #EDF3FF;
    --text:  #C2D0E6;
    --muted: #8597B0;
    --hint:  #647892;
    --paper: #0A1222;
    --line:  rgba(255, 255, 255, 0.10);

    --glass:        rgba(255, 255, 255, 0.06);
    --glass-strong: rgba(22, 32, 52, 0.94);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow:    0 24px 60px -22px rgba(0, 0, 0, 0.6);
    --glass-shadow-sm: 0 10px 30px -16px rgba(0, 0, 0, 0.5);

    --aurora-bg:       linear-gradient(180deg, #0A1222 0%, #0C1730 100%);
    --field-bg:        rgba(255, 255, 255, 0.06);
    --field-bg-focus:  rgba(255, 255, 255, 0.12);
    --sk-base:         rgba(255, 255, 255, 0.05);
    --sk-hi:           rgba(255, 255, 255, 0.11);

    /* Chat "other" bubble flips to dark; mine stays blue→teal. */
    --chat-other-bg:       linear-gradient(180deg, #1E2A40 0%, #172238 100%);
    --chat-other-text:     #EDF3FF;
    --chat-other-meta:     #8597B0;
    --chat-other-border:   transparent;
    --chat-reaction-bg:    #162034;
    --chat-reaction-count: #8597B0;
}