/* ============================================
   TOKENS — SharpWebP Design System
   Single source of truth for all design tokens.
   NO other file should define :root colors/fonts.
   ============================================ */

/* Fonts */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400;500;700;900&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&display=swap');

:root {
    /* === Brand Colors === */
    --gold:              #C9A96E;
    --gold-light:        #E8D5A8;
    --gold-dim:          rgba(201, 169, 110, 0.12);
    --white-warm:        #F5F0E8;
    --cream:             #E8E4D9;

    /* === Backgrounds === */
    --bg-deep:           #08080A;
    --bg-card:           #0E0E11;
    --bg-card-hover:     #131317;
    --bg-elevated:       #18181E;

    /* === Borders === */
    --border:            rgba(201, 169, 110, 0.12);
    --border-light:      rgba(201, 169, 110, 0.06);

    /* === Text === */
    --text-primary:      #E8E4D9;
    --text-secondary:    #8A8A96;
    --text-muted:        #5A5A66;

    /* === Gradients === */
    --gradient-gold:     linear-gradient(135deg, #C9A96E, #E8D5A8);
    --gradient-subtle:   linear-gradient(135deg, rgba(201, 169, 110, 0.08), rgba(232, 213, 168, 0.06));

    /* === Status Colors (functional) === */
    --success:           #4ADE80;
    --error:             #F87171;
    --warning:           #FBBF24;
    --success-bg:        rgba(74, 222, 128, 0.08);
    --error-bg:          rgba(248, 113, 113, 0.08);
    --warning-bg:        rgba(251, 191, 36, 0.08);

    /* === Glass Morphism === */
    --glass-bg:          rgba(14, 14, 17, 0.7);
    --glass-border:      rgba(201, 169, 110, 0.08);
    --glass-blur:        16px;

    /* === Typography === */
    --font-display:      'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:         'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif:        'Fraunces', Georgia, serif;

    /* === Radii === */
    --radius:            10px;
    --radius-lg:         16px;
    --radius-xl:         24px;

    /* === Shadows === */
    --shadow-card:       0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 169, 110, 0.06);
    --shadow-glow:       0 0 80px rgba(201, 169, 110, 0.04);
    --shadow-gold:       0 0 20px rgba(201, 169, 110, 0.15);
}