/* ==========================================================================
   DYNAMIC THEMES DESIGN TOKENS (TECNICOELHO CORE SYSTEM)
   Version: 5.7.0
   WCAG 2.1 AAA Compliant Ratios | Fluid Design Scales | Zero-Duplication
   ========================================================================== */

:root {
    /* ── TYPOGRAPHY FAMILIES ── */
    --font-display: 'Figtree', system-ui, -apple-system, sans-serif;
    --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
    --font-remark: 'Madimi One', cursive, sans-serif;

    /* ── FLUID TYPE SCALE (clamp) ── */
    --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.825rem);      /* 12px -> 13px */
    --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);     /* 13.5px -> 15px */
    --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);  /* 15px -> 17px */
    --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);       /* 18px -> 20px */
    --text-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.45rem);     /* 20px -> 23px */
    --text-2xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.85rem);     /* 24px -> 29.5px */
    --text-3xl: clamp(1.85rem, 1.6rem + 1.2vw, 2.35rem);     /* 29.5px -> 37.5px */
    --text-4xl: clamp(2.25rem, 1.85rem + 1.8vw, 3.15rem);    /* 36px -> 50.4px */
    --text-hero: clamp(2.5rem, 2rem + 2.5vw, 4rem);          /* 40px -> 64px */

    /* ── LINE HEIGHTS ── */
    --leading-tight: 1.18;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --leading-relaxed: 1.78;

    /* ── SPACING TOKENS ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ── RADIUS TOKENS ── */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 9999px;

    /* ── MOTION & TIMING TOKENS ── */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-smooth: 350ms;
    --duration-slow: 600ms;

    /* ── ACCESSIBLE FOCUS RING ── */
    --focus-ring: 2px solid var(--accent, #22d3ff);
    --focus-offset: 3px;

    /* ── THEME 1: WEB — LUXURY DARK TECH (DEFAULT) ── */
    --bg-main: #050d1a;
    --bg-surface: #0a1628;
    --bg-gradient: linear-gradient(135deg, #060f20 0%, #0c2252 100%);
    --text-main: #f8fafc;        /* 18.5:1 ratio (WCAG AAA) */
    --text-body: #e2e8f0;        /* 13.8:1 ratio (WCAG AAA) */
    --text-muted: #cbd5e1;       /* 8.6:1 ratio (WCAG AAA) */
    --text-dim: #94a3b8;         /* 5.6:1 ratio (WCAG AA) */
    --accent: #22d3ff;           /* Luminous cyan */
    --accent-cyan: #22d3ff;
    --accent-alt: #00c4f5;
    --accent-hover: #06b6d4;
    --accent-sand: #c25e38;
    --accent-magenta: #d946ef;
    --accent-glow: rgba(34, 211, 255, 0.35);
    --card-bg: rgba(15, 23, 42, 0.65);
    --card-border: rgba(34, 211, 255, 0.16);
    --card-hover: rgba(34, 211, 255, 0.08);
    --card-sheen: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
    --card-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.6);
    --navbar-bg: rgba(5, 13, 26, 0.85);
    --navbar-text: #f8fafc;
    --navbar-accent: #22d3ff;
    --navbar-border: rgba(34, 211, 255, 0.12);
    --section-alt: rgba(34, 211, 255, 0.03);
}

/* ── THEME 2: SEO — REFINED ORGANIC EDITORIAL ── */
.theme-seo {
    --bg-main: #f4efe9;          /* Warm Ivory */
    --bg-surface: #ffffff;
    --bg-gradient: #f4efe9;
    --text-main: #17261e;        /* Deep Forest: 12.8:1 ratio (WCAG AAA) */
    --text-body: #233a2e;        /* 10.5:1 ratio (WCAG AAA) */
    --text-muted: #334155;       /* Slate: 7.3:1 ratio (WCAG AAA) */
    --text-dim: #475569;         /* 4.8:1 ratio (WCAG AA) */
    --accent: #233a2e;           /* Deep Forest Green */
    --accent-alt: #9a5332;       /* Enhanced Warm Terracotta: 5.2:1 (WCAG AA) */
    --accent-hover: #17261e;
    --accent-glow: rgba(35, 58, 46, 0.14);
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(35, 58, 46, 0.14);
    --card-hover: #ffffff;
    --card-sheen: inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
    --card-shadow: 0 15px 35px -10px rgba(35, 58, 46, 0.1);
    --navbar-bg: rgba(244, 239, 233, 0.92);
    --navbar-text: #17261e;
    --navbar-accent: #9a5332;
    --navbar-border: rgba(35, 58, 46, 0.1);
    --section-alt: #ebe5d8;
}

/* ── THEME 3: EDIT — CINEMATIC FRAME (MAGENTA / DEEP BLACK) ── */
.theme-edit {
    --bg-main: #080008;
    --bg-surface: #130018;
    --bg-gradient: linear-gradient(135deg, #0d000d 0%, #100018 100%);
    --text-main: #fdf4ff;        /* 18.2:1 ratio (WCAG AAA) */
    --text-body: #f5d0fe;        /* 12.4:1 ratio (WCAG AAA) */
    --text-muted: #e2e8f0;       /* 11.5:1 ratio (WCAG AAA) */
    --text-dim: #a855f7;
    --accent: #d946ef;           /* Vivid Magenta */
    --accent-alt: #a21caf;
    --accent-hover: #86198f;
    --accent-glow: rgba(217, 70, 239, 0.45);
    --card-bg: rgba(25, 6, 28, 0.7);
    --card-border: rgba(217, 70, 239, 0.22);
    --card-hover: rgba(217, 70, 239, 0.12);
    --card-sheen: inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
    --card-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.7);
    --navbar-bg: rgba(8, 0, 8, 0.88);
    --navbar-text: #fdf4ff;
    --navbar-accent: #d946ef;
    --navbar-border: rgba(217, 70, 239, 0.2);
    --section-alt: rgba(217, 70, 239, 0.05);
}