/* =========================================================
   Design Tokens — TechAdvisor Theme (Editorial Premium)
   Inspirado em TechAdvisor.com — branco, vermelho, editorial.
   ========================================================= */

:root {
    /* ── Cores Principais ─────────────────────────────────── */
    --color-bg:          #FAFAFA;
    --color-bg-alt:      #F4F4F4;
    --color-surface:     #FFFFFF;
    --color-surface-2:   #F4F4F4;

    /* Primário / texto */
    --color-primary:     #111111;
    --color-primary-700: #2B2B2B;
    --color-primary-600: #4A4A4A;
    --color-primary-500: #6B6B6B;

    /* Acento — VERMELHO (brand TechAdvisor) */
    --color-accent:       #E4002B;
    --color-accent-dark:  #B8001F;
    --color-accent-hover: #CC0025;
    --color-accent-light: #FFF0F3;

    /* Amazon / Compra */
    --color-amazon:       #FF9900;
    --color-amazon-dark:  #E68A00;
    --color-amazon-text:  #111111;

    /* Rating */
    --color-gold:         #F5A623;
    --color-gold-light:   #FFF3DB;

    /* Feedback */
    --color-success:      #0D7F3F;
    --color-success-light:#E6F4EA;
    --color-danger:       #D62B2B;
    --color-danger-light: #FDECEA;
    --color-warning:      #C77700;
    --color-warning-light:#FFF8E1;

    /* Score — círculos de nota */
    --score-excellent:    #0D7F3F;
    --score-good:         #2563EB;
    --score-average:      #C77700;
    --score-poor:         #D62B2B;

    /* ── Texto ────────────────────────────────────────────── */
    --color-text:         #111111;
    --color-text-sec:     #2B2B2B;
    --color-text-muted:   #5A5A5A;
    --color-text-light:   #909090;
    --color-text-inverse: #FFFFFF;

    /* ── Bordas ───────────────────────────────────────────── */
    --color-border:       #E8E8E8;
    --color-border-dark:  #CFCFCF;

    /* ── Sombras ──────────────────────────────────────────── */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:   0 1px 4px rgba(0,0,0,0.07);
    --shadow-md:   0 3px 10px rgba(0,0,0,0.09);
    --shadow-lg:   0 6px 20px rgba(0,0,0,0.11);
    --shadow-xl:   0 12px 40px rgba(0,0,0,0.14);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.07);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.13);
    --shadow-red:  0 4px 14px rgba(228,0,43,0.25);

    /* ── Tipografia ───────────────────────────────────────── */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Sora', 'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Escala tipográfica refinada */
    --text-2xs:  0.625rem;   /* 10px */
    --text-xs:   0.6875rem;  /* 11px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.9375rem;  /* 15px */
    --text-md:   1.0rem;     /* 16px */
    --text-lg:   1.0625rem;  /* 17px */
    --text-xl:   1.1875rem;  /* 19px */
    --text-2xl:  1.375rem;   /* 22px */
    --text-3xl:  1.75rem;    /* 28px */
    --text-4xl:  clamp(1.625rem, 3.5vw, 2.125rem);
    --text-5xl:  clamp(1.875rem, 4.5vw, 2.625rem);
    --text-hero: clamp(2rem, 5vw, 3.25rem);

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;
    --font-black:     900;

    --leading-none:   1.0;
    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* ── Espaçamento ──────────────────────────────────────── */
    --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 */
    --space-14: 3.5rem;    /* 56px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ── Layout ───────────────────────────────────────────── */
    --container-max:  1240px;
    --container-pad:  clamp(1rem, 3vw, 1.5rem);
    --sidebar-width:  300px;
    --content-max:    740px;

    /* ── Bordas arredondadas ──────────────────────────────── */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Transições ───────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Header ───────────────────────────────────────────── */
    --header-bg:           #FFFFFF;
    --header-text:         #111111;
    --hot-topics-height:   40px;
    --mainbar-height:      72px;
    --nav-height:          46px;
    --header-total-height: calc(var(--hot-topics-height) + var(--mainbar-height) + var(--nav-height));

    /* ── Z-index ──────────────────────────────────────────── */
    --z-base:    1;
    --z-raised:  10;
    --z-sticky:  100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;
}

/* ── Dark Mode Tokens ───────────────────────────────────── */
[data-theme="dark"],
.dark-theme {
    --color-bg:          #050505; /* Midnight Black */
    --color-bg-alt:      #0E0E0E;
    --color-surface:     #0D0D0D;
    --color-surface-2:   #151515;

    --color-primary:     #FFFFFF;
    --color-primary-700: #E5E5E5;
    --color-primary-600: #CCCCCC;
    --color-primary-500: #999999;

    --color-text:         #FFFFFF;
    --color-text-sec:     #E5E5E5;
    --color-text-muted:   #999999;
    --color-text-light:   #666666;

    --color-border:       #1A1A1A;
    --color-border-dark:  #262626;

    --header-bg:          #0D0D0D;
    --header-text:        #FFFFFF;

    --color-accent-light: #2D050A;

    --shadow-xs:   0 1px 2px rgba(0,0,0,0.5);
    --shadow-sm:   0 2px 8px rgba(0,0,0,0.6);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.7);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.8);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.6);
    --shadow-card-hover: 0 12px 48px rgba(0,0,0,0.9);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:          #050505;
        --color-bg-alt:      #0E0E0E;
        --color-surface:     #0D0D0D;
        --color-surface-2:   #151515;

        --color-primary:     #FFFFFF;
        --color-primary-700: #E5E5E5;
        --color-primary-600: #CCCCCC;
        --color-primary-500: #999999;

        --color-text:         #FFFFFF;
        --color-text-sec:     #E5E5E5;
        --color-text-muted:   #999999;
        --color-text-light:   #666666;

        --color-border:       #1A1A1A;
        --color-border-dark:  #262626;

        --header-bg:          #0D0D0D;
        --header-text:        #FFFFFF;

        --color-accent-light: #2D050A;

        --shadow-xs:   0 1px 2px rgba(0,0,0,0.5);
        --shadow-sm:   0 2px 8px rgba(0,0,0,0.6);
        --shadow-md:   0 4px 16px rgba(0,0,0,0.7);
        --shadow-lg:   0 8px 32px rgba(0,0,0,0.8);
        --shadow-card: 0 4px 16px rgba(0,0,0,0.6);
        --shadow-card-hover: 0 12px 48px rgba(0,0,0,0.9);
    }
}