/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — ClickMalas Design System v2
   Source of truth para todas as decisões visuais do sistema.

   Estrutura:
   LAYER 1 — FOUNDATION (Primitives): valores brutos
   LAYER 2 — SEMANTIC (Design Decisions): significado atribuído

   Escala tipográfica: Minor Third (1.2), base 16px
   Spacing: 8px grid em rem
   Direção responsiva: desktop-first (max-width)

   Documentação completa: /DESIGN-SYSTEM.md
   ═══════════════════════════════════════════════════════════════ */

:root {

    /* ══════════════════════════════════════════
       LAYER 1 — FOUNDATION (Primitives)
       Valores brutos, sem significado semântico
       ══════════════════════════════════════════ */

    /* ── Color Primitives: Purple ── */
    --purple-50: #F5F2FB;
    --purple-100: #EBE5F7;
    --purple-200: #D4C8EE;
    --purple-300: #B8A4E2;
    --purple-400: #9A80D4;
    --purple-500: #7B5FBD;
    --purple-600: #6a4fa8;
    --purple-700: #573F8E;
    --purple-800: #443173;
    --purple-900: #31235A;

    /* ── Color Primitives: Gray ── */
    --gray-50: #FAFAFA;
    --gray-100: #F4F4F5;
    --gray-200: #E4E4E7;
    --gray-300: #D1D1D6;
    --gray-400: #A0A0AB;
    --gray-500: #70707B;
    --gray-600: #51525C;
    --gray-700: #3F3F46;
    --gray-800: #26272B;
    --gray-900: #18181B;

    /* ── Color Primitives: Supporting ── */
    --green-500: #53c160;
    --green-600: #3fae4c;
    --green-700: #349a40;
    --pink-500: #FF6B9D;
    --blue-500: #5B9BD5;
    --orange-500: #f7a31d;
    --rusty-500: #dc7338;
    --rusty-600: #c95f23;
    --rusty-700: #d1672c;

    /* ── Color Primitives: Status Palettes ── */
    --amber-50: #FFFBEB;
    --amber-200: #FDE68A;
    --amber-500: #F59E0B;
    --amber-800: #92400E;

    --emerald-50: #F0FDF4;
    --emerald-200: #BBF7D0;
    --emerald-500: #10B981;
    --emerald-700: #15803D;

    --red-50: #FEF2F2;
    --red-200: #FECACA;
    --red-500: #EF4444;
    --red-800: #991B1B;

    --sky-50: #EFF6FF;
    --sky-200: #BFDBFE;
    --sky-500: #3B82F6;
    --sky-800: #1E40AF;

    --violet-50: #F5F3FF;
    --violet-200: #DDD6FE;
    --violet-700: #6D28D9;

    /* ── Typography Primitives ── */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'Courier New', monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ── Line-Height Primitives ── */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* ── Letter-Spacing Primitives ── */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;


    /* ══════════════════════════════════════════
       LAYER 2 — SEMANTIC (Design Decisions)
       Atribui significado aos primitivos
       ══════════════════════════════════════════ */

    /* ── Brand ── */
    --color-primary: var(--purple-500);
    --color-primary-hover: var(--purple-600);
    --color-primary-dark: #4e2f83;
    --color-primary-pressed: #3c2467;
    --color-primary-light: #9B7FDD;
    --color-primary-pale: #9f84d4;
    --color-secondary: var(--green-500);
    --color-secondary-dark: var(--green-600);
    --color-secondary-pressed: var(--green-700);
    --color-accent: var(--pink-500);
    --color-blue: var(--blue-500);
    --color-orange: var(--orange-500);
    --color-rusty: var(--rusty-500);
    --color-rustyDark: var(--rusty-600);
    --color-rustyPressed: var(--rusty-700);

    /* ── Aliases (backward compat com common.css e tokens.css) ── */
    --primary: var(--color-primary);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);
    --dark: #333;
    --light: #F5F5F5;
    --white: #FFF;

    /* ── Extended Primary Scale (backward compat) ── */
    --primary-50: var(--purple-50);
    --primary-100: var(--purple-100);
    --primary-200: var(--purple-200);
    --primary-300: var(--purple-300);
    --primary-400: var(--purple-400);
    --primary-500: var(--color-primary);
    --primary-600: var(--color-primary-hover);
    --primary-700: var(--purple-700);
    --primary-800: var(--purple-800);
    --primary-900: var(--purple-900);

    /* ── Semantic Status ── */
    --color-success: #52C41A;
    --color-danger: #FF4D4F;
    --color-warning: #FF9F43;
    --color-info: var(--blue-500);

    /* ── Status Palettes (derivadas do Foundation) ── */
    --status-warning-bg: var(--amber-50);
    --status-warning-text: var(--amber-800);
    --status-warning-border: var(--amber-200);
    --status-warning-icon: var(--amber-500);

    --status-success-bg: var(--emerald-50);
    --status-success-text: var(--emerald-700);
    --status-success-border: var(--emerald-200);
    --status-success-icon: var(--emerald-500);

    --status-danger-bg: var(--red-50);
    --status-danger-text: var(--red-800);
    --status-danger-border: var(--red-200);
    --status-danger-icon: var(--red-500);

    --status-info-bg: var(--sky-50);
    --status-info-text: var(--sky-800);
    --status-info-border: var(--sky-200);
    --status-info-icon: var(--sky-500);

    --status-purple-bg: var(--violet-50);
    --status-purple-text: var(--violet-700);
    --status-purple-border: var(--violet-200);

    /* ── Base Neutrals (backward compat) ── */
    --color-white: #FFFFFF;
    --color-black: #212121;
    --color-blackLight: #3a3a3a;
    --color-fog: #f4f5f7;

    /* ── Surfaces ── */
    --surface-primary: #FFFFFF;
    --surface-secondary: var(--gray-50);
    --page-bg: #F8F7FC;

    /* ── Text ── */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-500);
    --text-tertiary: var(--gray-400);
    --text-on-primary: #FFFFFF;

    /* ── Borders ── */
    --border-default: var(--gray-200);
    --border-subtle: var(--gray-100);

    /* ── Typography Scale ──
       Minor Third (1.2), base 16px
       Double-Strand: tight ratios (~1.125) para UI, wider (~1.2) para headings
       Tokens fixos (xs, sm, base) = sem scaling responsivo
       Tokens fluidos (md-3xl) = clamp() entre 375px e 1200px */
    --text-xs:   0.75rem;                                          /* 12px sempre */
    --text-sm:   0.875rem;                                         /* 14px sempre */
    --text-base: 1rem;                                             /* 16px sempre */
    --text-md:   clamp(1rem,     0.943rem + 0.24vw, 1.125rem);    /* 16px → 18px */
    --text-lg:   clamp(1.125rem, 1.068rem + 0.24vw, 1.25rem);     /* 18px → 20px */
    --text-xl:   clamp(1.25rem,  1.136rem + 0.48vw, 1.5rem);      /* 20px → 24px */
    --text-2xl:  clamp(1.5rem,   1.33rem  + 0.73vw, 1.875rem);    /* 24px → 30px */
    --text-3xl:  clamp(1.625rem, 1.45rem  + 1vw,    2.25rem);     /* 26px → 36px */

    /* ── Spacing (8px grid, em rem para escalabilidade) ── */
    --space-1: 0.25rem;    /* 4px  */
    --space-2: 0.5rem;     /* 8px  */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.25rem;    /* 20px */
    --space-6: 1.5rem;     /* 24px */
    --space-7: 1.75rem;    /* 28px */
    --space-8: 2rem;       /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */

    /* ── Border Radius ── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;

    /* ── Shadows (layered depth) ── */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

    /* ── Brand Shadows ── */
    --shadow-primary: 0 4px 14px rgba(123, 95, 189, 0.25);
    --shadow-primary-sm: 0 2px 8px rgba(123, 95, 189, 0.3);
    --shadow-primary-lg: 0 6px 20px rgba(123, 95, 189, 0.35);
    --shadow-primary-xl: 0 8px 20px rgba(123, 95, 189, 0.35);
    --shadow-success: 0 4px 12px rgba(82, 196, 26, 0.25);
    --shadow-success-sm: 0 2px 8px rgba(82, 196, 26, 0.3);

    /* ── Z-Index Scale ── */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 500;
    --z-modal-backdrop: 1000;
    --z-modal: 1001;
    --z-toast: 1100;
    --z-tooltip: 1200;

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;

    /* ── Focus Rings ── */
    --focus-ring-primary: 0 0 0 3px rgba(123, 95, 189, 0.1);
    --focus-ring-primary-md: 0 0 0 2px rgba(123, 95, 189, 0.1);

    /* ── Gradients ── */
    --gradient-cta: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-200) 100%);

    /* ── Layout ── */
    --sidebar-width: 260px;

    /* ── Breakpoints (referência - CSS não suporta vars em @media) ──
       iPhone SE:       375px
       Mobile pequeno:  400px
       Mobile:          576px
       Tablet:          768px
       iPad Portrait:   834px
       Desktop:         1024px
       Wide:            1200px
    ── */
}