/* ============================================
   Dorevo Institute — Design Tokens
   ============================================ */

:root {
    /* ── Brand ── */
    --color-teal: #1E4459;
    --color-teal-dark: #142E3C;
    --color-teal-light: #2A5A70;
    --color-coral: #6A102F;
    --color-coral-dark: #500C22;
    --color-coral-light: #8A1A40;
    --color-tinto: #6A102F;
    --color-tinto-dark: #500C22;
    --color-tinto-light: #8A1A40;
    --color-gray-text: #7F7F7F;

    /* ── Semantic ── */
    --color-success: #2D9C6F;
    --color-success-light: rgba(45,156,111,0.1);
    --color-danger: #D64545;
    --color-danger-light: rgba(214,69,69,0.1);
    --color-warning: #D4A24C;
    --color-warning-light: rgba(212,162,76,0.1);
    --color-info: #6366F1;
    --color-info-light: rgba(99,102,241,0.1);

    /* ── Surface ── */
    --color-white: #FFFFFF;
    --color-surface: #F3F4F6;
    --color-surface-warm: #F3F4F6;
    --color-surface-alt: #E8E9EC;
    --color-border: #E5E4E0;
    --color-border-subtle: #EDECEA;

    /* ── Text ── */
    --color-text: #1F2937;
    --color-text-secondary: #4B5563;
    --color-text-muted: #6B7280;
    --color-text-light: #9CA3AF;

    /* ── Gradient ── */
    --gradient-brand: linear-gradient(135deg, var(--color-teal) 0%, var(--color-tinto) 100%);
    --gradient-brand-hover: linear-gradient(135deg, var(--color-teal-dark) 0%, var(--color-tinto-dark) 100%);
    --gradient-coral: linear-gradient(135deg, var(--color-coral) 0%, var(--color-coral-dark) 100%);

    /* ── Typography ── */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Source Sans 3', 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* ── Type Scale ── */
    --text-xs: 0.7rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-md: 0.95rem;
    --text-lg: 1.1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;

    /* ── Spacing ── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.1);

    /* ── Motion ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 250ms var(--ease-out);
    --transition-slow: 400ms var(--ease-out);
}