/**
 * ArchByte Design Tokens
 * Paleta: Monochrome Harmony (com suporte a dark/light theme)
 * Aesthetic: Brutalismo suave premium
 */

/* ============================================
   Color Tokens (Monochrome Harmony)
   ============================================ */
:root {
    /* Base palette (sempre disponível) */
    --alabaster-grey: #cfdbd5;
    --soft-linen: #e8eddf;
    --tuscan-sun: #f5cb5c;
    --carbon-black: #242423;
    --graphite: #333533;
}

/* ============================================
   Theme Tokens (Dark-first com suporte a Light)
   ============================================ */

/* Dark Theme (default) */
:root,
.dark-theme {
    /* Background */
    --bg: #0a0a0a;
    --bg-surface: #161616;
    --bg-surface-elevated: #1e1e1e;

    /* Text */
    --text-primary: var(--soft-linen);
    --text-secondary: #b8c5bd;
    --text-muted: #7a8680;

    /* Border */
    --border: rgba(207, 219, 213, 0.12);
    --border-hover: rgba(207, 219, 213, 0.24);

    /* Accent */
    --accent: var(--tuscan-sun);
    --accent-hover: #f7d67a;
    --accent-text: var(--carbon-black);

    /* Shadows & Glows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6);
    --glow-premium: 0 0 20px rgba(245, 203, 92, 0.15);
    --glow-premium-strong: 0 0 32px rgba(245, 203, 92, 0.25);
}

/* Light Theme */
.light-theme {
    /* Background */
    --bg: #fafafa;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #f5f5f5;

    /* Text */
    --text-primary: var(--carbon-black);
    --text-secondary: #4a4a4a;
    --text-muted: #6b6b6b;

    /* Border */
    --border: rgba(36, 36, 35, 0.12);
    --border-hover: rgba(36, 36, 35, 0.24);

    /* Accent - Darker golden for better contrast on light backgrounds */
    --accent: #c9a227;
    --accent-hover: #a68820;
    --accent-text: #ffffff;

    /* Shadows & Glows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.16);
    --glow-premium: 0 0 20px rgba(201, 162, 39, 0.15);
    --glow-premium-strong: 0 0 32px rgba(201, 162, 39, 0.25);
}

/* ============================================
   Typography Tokens
   ============================================ */
:root {
    /* Font families */
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Source Serif 4', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Font sizes */
    --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 */
    --text-6xl: 3.75rem;
    /* 60px */

    /* Line heights */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Letter spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
}

/* ============================================
   Spacing Tokens
   ============================================ */
:root {
    --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-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */

    /* Section spacing */
    --section-spacing: var(--space-24);
    --section-spacing-sm: var(--space-16);
}

@media (max-width: 768px) {
    :root {
        --section-spacing: var(--space-16);
        --section-spacing-sm: var(--space-12);
    }
}

/* ============================================
   Border & Radius Tokens
   ============================================ */
:root {
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --border-width: 1px;
    --border-width-thick: 2px;
}

/* ============================================
   Animation Tokens
   ============================================ */
:root {
    --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}

/* ============================================
   Layout Tokens
   ============================================ */
:root {
    --container-max-width: 1280px;
    --container-padding: var(--space-6);
    --header-height: 80px;
}

@media (max-width: 768px) {
    :root {
        --container-padding: var(--space-4);
        --header-height: 64px;
    }
}