/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS - StudyMed
   Sistema modular de escalas para coesão visual
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────
       SPACING SYSTEM (8px base)
       ───────────────────────────────────────────────────────── */
    --spacing-xs: 0.5rem;    /* 8px - micro */
    --spacing-sm: 1rem;      /* 16px - small */
    --spacing-md: 1.5rem;    /* 24px - medium */
    --spacing-lg: 2rem;      /* 32px - large */
    --spacing-xl: 3rem;      /* 48px - x-large */
    --spacing-2xl: 4rem;     /* 64px - 2x-large */
    --spacing-3xl: 5rem;     /* 80px - 3x-large */

    /* ─────────────────────────────────────────────────────────
       BORDER RADIUS
       ───────────────────────────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 50%;

    /* ─────────────────────────────────────────────────────────
       SHADOW SYSTEM
       ───────────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
    --shadow-inner: inset 0 0 15px rgba(0, 0, 0, 0.2);
    --shadow-inner-light: inset 0 0 20px rgba(0, 0, 0, 0.1);

    /* ─────────────────────────────────────────────────────────
       OPACITY SCALE
       ───────────────────────────────────────────────────────── */
    --opacity-0: 0;
    --opacity-subtle: 0.05;    /* 5% - muito suave */
    --opacity-light: 0.1;      /* 10% - leve */
    --opacity-medium: 0.2;     /* 20% - médio */
    --opacity-strong: 0.4;     /* 40% - forte */
    --opacity-heavy: 0.6;      /* 60% - pesado */
    --opacity-darker: 0.8;     /* 80% - mais escuro */
    --opacity-full: 1;         /* 100% - opaco */

    /* ─────────────────────────────────────────────────────────
       TRANSITION / ANIMATION DURATIONS
       ───────────────────────────────────────────────────────── */
    --transition-fast: 150ms;     /* Micro-interações, hovers rápidos */
    --transition-base: 300ms;     /* Padrão, mudanças normais */
    --transition-slow: 500ms;     /* Transições maiores, modal open */
    --transition-slower: 800ms;   /* Animações de scroll reveal */
    --transition-slowest: 1.2s;   /* Animações de entrance */

    /* ─────────────────────────────────────────────────────────
       EASING FUNCTIONS
       ───────────────────────────────────────────────────────── */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.26, 1.55);

    /* ─────────────────────────────────────────────────────────
       Z-INDEX HIERARCHY
       ───────────────────────────────────────────────────────── */
    --z-below: -1;             /* Below base layer */
    --z-base: 0;               /* Base content */
    --z-elevated: 10;          /* Cards, hover states */
    --z-sticky: 25;            /* Sticky filters, sticky elements */
    --z-dropdown: 50;          /* Dropdowns, popovers */
    --z-fixed-nav: 100;        /* Fixed headers, sidebars */
    --z-modal-bg: 150;         /* Modal backdrop */
    --z-modal: 200;            /* Modals, dialogs */
    --z-toast: 300;            /* Toast notifications */
    --z-torch: 9999;           /* Mouse torch effect */

    /* ─────────────────────────────────────────────────────────
       FILTER & BACKDROP
       ───────────────────────────────────────────────────────── */
    --blur-sm: blur(8px);
    --blur-md: blur(12px);
    --blur-lg: blur(20px);
    --blur-xl: blur(40px);
    --blur-2xl: blur(60px);

    /* ─────────────────────────────────────────────────────────
       TYPOGRAPHY SCALE
       ───────────────────────────────────────────────────────── */
    --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: 1.875rem;      /* 30px */
    --text-4xl: 2.25rem;       /* 36px */
    --text-5xl: 3rem;          /* 48px */

    /* Font weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Line heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-loose: 1.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --bp-xs: 320px;
    --bp-sm: 640px;
    --bp-md: 1024px;
    --bp-lg: 1280px;
    --bp-xl: 1536px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    /* Softer shadows in light mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.18);
    --shadow-inner: inset 0 0 15px rgba(0, 0, 0, 0.05);
    --shadow-inner-light: inset 0 0 20px rgba(0, 0, 0, 0.03);

    /* Vibrant orbs in light mode - INCREASED opacity */
    --opacity-subtle: 0.12;
    --opacity-light: 0.25;
    --opacity-medium: 0.4;
}