/* ══════════════════════════════════════════════════════════════
   VIRALIO — Design Tokens (Refined Tech)
   ══════════════════════════════════════════════════════════════
   Single source of truth pentru tot design system-ul. Schimbi
   o variabilă aici și se propagă în tot UI-ul (după ce restul
   componentelor sunt migrate).

   Vibe: Linear / Vercel / Raycast — refined dark, mint accent unic,
   tipografie distinctivă (Fraunces display + Geist body).

   Convenții:
   - --color-* : culori semantice (bg, surface, text, accent, danger…)
   - --font-*  : familii de fonturi
   - --text-*  : type scale (modular 1.25)
   - --space-* : spacing scale (4px base)
   - --radius-*: corner radius
   - --shadow-*: elevation
   - --ease-*  : timing functions
   - --z-*     : z-index ladder

   Light/Dark:
   - :root              = dark (default)
   - [data-theme="light"] = override la light
   ══════════════════════════════════════════════════════════════ */

/* ── DARK THEME (default) ───────────────────────────────────── */
:root {
    /* Backgrounds — layered */
    --color-bg:           #0a0a0c;   /* page background */
    --color-bg-elevated:  #0f0f12;   /* slight elevation */
    --color-surface:      #14141a;   /* cards, modals base */
    --color-surface-2:    #1a1a22;   /* nested surfaces */
    --color-surface-3:    #22222b;   /* hover states */

    /* Borders */
    --color-border:           rgba(255, 255, 255, 0.08);
    --color-border-strong:    rgba(255, 255, 255, 0.14);
    --color-border-subtle:    rgba(255, 255, 255, 0.04);

    /* Text — high contrast on dark */
    --color-text:        #fafaf5;            /* primary, off-white cu cald */
    --color-text-muted:  rgba(250, 250, 245, 0.62);
    --color-text-subtle: rgba(250, 250, 245, 0.38);
    --color-text-faint:  rgba(250, 250, 245, 0.22);

    /* Accent — mint, dominant single accent */
    --color-accent:       #65d69e;   /* mint primary */
    --color-accent-hover: #82e0b2;   /* lighter on hover */
    --color-accent-press: #4abf85;   /* darker on press */
    --color-accent-bg:    rgba(101, 214, 158, 0.10);  /* tinted bg */
    --color-accent-bg-strong: rgba(101, 214, 158, 0.18);
    --color-accent-border:    rgba(101, 214, 158, 0.30);
    --color-accent-glow:      rgba(101, 214, 158, 0.35);

    /* Semantic */
    --color-success: #65d69e;
    --color-success-bg: rgba(101, 214, 158, 0.10);
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.10);
    --color-danger:  #f87171;
    --color-danger-bg: rgba(248, 113, 113, 0.10);
    --color-info:    #7dd3fc;
    --color-info-bg: rgba(125, 211, 252, 0.10);

    /* Selection */
    --color-selection-bg: rgba(101, 214, 158, 0.30);
    --color-selection-fg: #fafaf5;

    /* ── TYPOGRAPHY ──────────────────────────────────────── */

    /* Familie — Fraunces e display serif characterful, Geist e body
       sans refined, JetBrains Mono e pentru numere/credite. */
    --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
    --font-body:    'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, Consolas, monospace;

    /* Type scale — modular 1.25 ratio */
    --text-xs:      0.75rem;     /* 12px */
    --text-sm:      0.875rem;    /* 14px */
    --text-base:    1rem;        /* 16px */
    --text-lg:      1.125rem;    /* 18px */
    --text-xl:      1.25rem;     /* 20px */
    --text-2xl:     1.5rem;      /* 24px */
    --text-3xl:     2rem;        /* 32px */
    --text-4xl:     2.5rem;      /* 40px */
    --text-5xl:     3.25rem;     /* 52px */
    --text-display: 4.5rem;      /* 72px hero */
    --text-mega:    6rem;        /* 96px statement piece */

    /* Line heights */
    --leading-tight:   1.1;   /* display headlines */
    --leading-snug:    1.25;  /* h2/h3 */
    --leading-normal:  1.5;   /* body */
    --leading-relaxed: 1.7;   /* long-form text */

    /* Weights */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    900;

    /* Letter spacing */
    --tracking-tight:  -0.03em;   /* big display */
    --tracking-snug:   -0.015em;  /* headlines */
    --tracking-normal: 0;
    --tracking-wide:   0.05em;
    --tracking-wider:  0.1em;     /* small caps */
    --tracking-widest: 0.18em;    /* eyebrow labels */

    /* ── SPACING (4px base) ──────────────────────────────── */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.5rem;    /* 24px */
    --space-6:  2rem;      /* 32px */
    --space-7:  2.5rem;    /* 40px */
    --space-8:  3rem;      /* 48px */
    --space-10: 4rem;      /* 64px */
    --space-12: 6rem;      /* 96px */
    --space-16: 8rem;      /* 128px */
    --space-20: 10rem;     /* 160px section spacing */

    /* ── RADII ───────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-3xl:  40px;
    --radius-full: 9999px;

    /* ── SHADOWS (dark-optimized — border + glow over fill) ── */
    --shadow-xs: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.70);
    --shadow-glow:        0 0 40px var(--color-accent-glow);
    --shadow-glow-strong: 0 0 80px var(--color-accent-glow);

    /* ── EASING & DURATION ───────────────────────────────── */
    --ease-snap:    cubic-bezier(0.16, 1, 0.3, 1);   /* hero default */
    --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    --duration-instant: 80ms;
    --duration-fast:    150ms;
    --duration-base:    250ms;
    --duration-slow:    400ms;
    --duration-slower:  600ms;

    /* ── Z-INDEX LADDER ──────────────────────────────────── */
    --z-base:      1;
    --z-raised:    10;
    --z-sticky:    50;
    --z-nav:       100;
    --z-dropdown:  500;
    --z-modal-bg:  10000;
    --z-modal:     10001;
    --z-popover:   100000;
    --z-toast:     999999;

    /* ── LAYOUT ──────────────────────────────────────────── */
    --container-max:   1280px;
    --container-prose: 720px;
    --container-narrow: 480px;
}

/* ── LIGHT THEME OVERRIDE ───────────────────────────────────── */
[data-theme="light"] {
    --color-bg:           #fafaf5;
    --color-bg-elevated:  #ffffff;
    --color-surface:      #ffffff;
    --color-surface-2:    #f4f4ed;
    --color-surface-3:    #ebebe2;

    --color-border:           rgba(10, 10, 12, 0.08);
    --color-border-strong:    rgba(10, 10, 12, 0.14);
    --color-border-subtle:    rgba(10, 10, 12, 0.04);

    --color-text:        #0a0a0c;
    --color-text-muted:  rgba(10, 10, 12, 0.65);
    --color-text-subtle: rgba(10, 10, 12, 0.42);
    --color-text-faint:  rgba(10, 10, 12, 0.22);

    --color-accent:       #10b981;   /* emerald, mai dens pe light */
    --color-accent-hover: #059669;
    --color-accent-press: #047857;
    --color-accent-bg:    rgba(16, 185, 129, 0.08);
    --color-accent-bg-strong: rgba(16, 185, 129, 0.16);
    --color-accent-border:    rgba(16, 185, 129, 0.28);
    --color-accent-glow:      rgba(16, 185, 129, 0.25);

    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.08);
    --color-warning: #d97706;
    --color-warning-bg: rgba(217, 119, 6, 0.08);
    --color-danger:  #dc2626;
    --color-danger-bg: rgba(220, 38, 38, 0.08);
    --color-info:    #0284c7;
    --color-info-bg: rgba(2, 132, 199, 0.08);

    --color-selection-bg: rgba(16, 185, 129, 0.20);
    --color-selection-fg: #0a0a0c;

    /* Light shadows — fill-based, soft */
    --shadow-xs: 0 1px 2px rgba(10, 10, 12, 0.04);
    --shadow-sm: 0 2px 8px rgba(10, 10, 12, 0.06);
    --shadow-md: 0 6px 20px rgba(10, 10, 12, 0.08);
    --shadow-lg: 0 18px 40px rgba(10, 10, 12, 0.10);
    --shadow-xl: 0 32px 70px rgba(10, 10, 12, 0.12);
    --shadow-glow:        0 0 30px rgba(16, 185, 129, 0.15);
    --shadow-glow-strong: 0 0 60px rgba(16, 185, 129, 0.20);
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast:    0ms;
        --duration-base:    0ms;
        --duration-slow:    0ms;
        --duration-slower:  0ms;
    }
}