/**
 * ADAA Scanner Design Tokens
 * 
 * Token Naming Conventions:
 * - Use kebab-case for all tokens: --{category}-{property}-{variant}
 * - Categories: color, spacing, typography, radius, shadow, transition
 * - Semantic tokens (success, warning, error) for user feedback
 * - Light mode tokens defined on :root
 * - Dark mode tokens defined in @media (prefers-color-scheme: dark)
 * 
 * Token Hierarchy:
 * - Primitive tokens: raw values (--color-primary-default: #0d9488)
 * - Semantic tokens: alias primitives via var() (--color-text-primary: var(--color-neutral-800))
 * - Component tokens: alias semantics per component (--btn-bg: var(--color-primary-default))
 * 
 * Example: --color-primary-default, --spacing-sm, --font-size-base
 */

/* ==================== COLORS ==================== */

:root {
    /* Primary Color - Deep Teal */
    --color-primary-default: #0d9488;
    --color-primary-hover: #0f766e;
    --color-primary-subtle: #ccfbf1;
    --color-primary-light: #5eead4;
    --color-primary-dark: #115e59;

    /* Accent Color - Orange */
    --color-accent-default: #f97316;
    --color-accent-hover: #ea580c;
    --color-accent-subtle: #fff7ed;
    --color-accent-light: #fdba74;
    --color-accent-dark: #c2410c;

    /* Neutral Colors - Warm Stone Scale */
    --color-neutral-0: #fafaf9;  /* stone-50 */
    --color-neutral-50: #f5f5f4;  /* stone-100 */
    --color-neutral-100: #e7e5e4; /* stone-200 */
    --color-neutral-200: #d6d3d1; /* stone-300 */
    --color-neutral-300: #a8a29e; /* stone-400 */
    --color-neutral-400: #78716c; /* stone-500 */
    --color-neutral-500: #57534e; /* stone-600 */
    --color-neutral-600: #44403c; /* stone-700 */
    --color-neutral-700: #292524; /* stone-800 */
    --color-neutral-800: #1c1917; /* stone-900 */

    /* Semantic Colors */
    --color-success-default: #10b981;
    --color-success-hover: #059669;
    --color-success-subtle: #ecfdf5;
    --color-success-light: #6ee7b7;

    --color-warning-default: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-subtle: #fffbeb;
    --color-warning-light: #fcd34d;

    --color-error-default: #ef4444;
    --color-error-hover: #dc2626;
    --color-error-subtle: #fef2f2;
    --color-error-light: #f87171;

    /* Severity Colors (for accessibility reports) */
    --color-severity-critical: #dc2626;
    --color-severity-serious: #f97316;
    --color-severity-moderate: #f59e0b;
    --color-severity-minor: #0284c7;

    /* Score Range Colors */
    --color-score-excellent: #059669;    /* Emerald-600 — 90-100 */
    --color-score-good: #10b981;         /* Emerald-500 — 70-89 */
    --color-score-fair: #f59e0b;         /* Amber-500  — 40-69 */
    --color-score-poor: #ef4444;         /* Red-500    — 0-39 */

    /* Info Color */
    --color-info-default: #0ea5e9;       /* Sky-500 — informational */
    --color-info-hover: #0284c7;
    --color-info-subtle: #e0f2fe;
    --color-info-light: #7dd3fc;

    /* Common Aliases — semantic layer */
    --color-text-primary: var(--color-neutral-800);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-muted: var(--color-neutral-500);
    --color-text-inverse: var(--color-neutral-0);
    --color-bg-primary: var(--color-neutral-0);
    --color-bg-secondary: var(--color-neutral-50);
    --color-bg-tertiary: var(--color-neutral-100);
    --color-border: var(--color-neutral-200);
    --color-border-strong: var(--color-neutral-300);
}

/* Dark Mode Tokens */
/* Manual theme toggle */
:root[data-theme="dark"] {
    --color-primary-default: #14b8a6;
    --color-primary-hover: #0d9488;
    --color-primary-subtle: #134e4a;
    --color-primary-light: #2dd4bf;
    --color-primary-dark: #ccfbf1;

    --color-accent-default: #fb923c;
    --color-accent-hover: #f97316;
    --color-accent-subtle: #7c2d12;
    --color-accent-light: #fdba74;
    --color-accent-dark: #fff7ed;

    /* Invert neutral scale for dark mode */
    --color-neutral-0: #1c1917;  /* stone-900 becomes bg */
    --color-neutral-50: #292524; /* stone-800 */
    --color-neutral-100: #44403c; /* stone-700 */
    --color-neutral-200: #57534e; /* stone-600 */
    --color-neutral-300: #78716c; /* stone-500 */
    --color-neutral-400: #a8a29e; /* stone-400 */
    --color-neutral-500: #d6d3d1; /* stone-300 */
    --color-neutral-600: #e7e5e4; /* stone-200 */
    --color-neutral-700: #f5f5f4; /* stone-100 */
    --color-neutral-800: #fafaf9; /* stone-50 becomes text */

    --color-success-subtle: #064e3b;
    --color-warning-subtle: #78350f;
    --color-error-subtle: #7f1d1d;

    --color-text-primary: var(--color-neutral-800);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-muted: var(--color-neutral-600);
    --color-text-inverse: var(--color-neutral-800);
    --color-bg-primary: var(--color-neutral-0);
    --color-bg-secondary: var(--color-neutral-50);
    --color-bg-tertiary: var(--color-neutral-100);
    --color-border: var(--color-neutral-200);
    --color-border-strong: var(--color-neutral-300);
}

/* System preference fallback (when no manual override) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-primary-default: #14b8a6;
        --color-primary-hover: #0d9488;
        --color-primary-subtle: #134e4a;
        --color-primary-light: #2dd4bf;
        --color-primary-dark: #ccfbf1;

        --color-accent-default: #fb923c;
        --color-accent-hover: #f97316;
        --color-accent-subtle: #7c2d12;
        --color-accent-light: #fdba74;
        --color-accent-dark: #fff7ed;

        /* Invert neutral scale for dark mode */
        --color-neutral-0: #1c1917;  /* stone-900 becomes bg */
        --color-neutral-50: #292524; /* stone-800 */
        --color-neutral-100: #44403c; /* stone-700 */
        --color-neutral-200: #57534e; /* stone-600 */
        --color-neutral-300: #78716c; /* stone-500 */
        --color-neutral-400: #a8a29e; /* stone-400 */
        --color-neutral-500: #d6d3d1; /* stone-300 */
        --color-neutral-600: #e7e5e4; /* stone-200 */
        --color-neutral-700: #f5f5f4; /* stone-100 */
        --color-neutral-800: #fafaf9; /* stone-50 becomes text */

        --color-success-subtle: #064e3b;
        --color-warning-subtle: #78350f;
        --color-error-subtle: #7f1d1d;

        --color-text-primary: var(--color-neutral-800);
        --color-text-secondary: var(--color-neutral-600);
        --color-text-muted: var(--color-neutral-600);
        --color-text-inverse: var(--color-neutral-800);
        --color-bg-primary: var(--color-neutral-0);
        --color-bg-secondary: var(--color-neutral-50);
        --color-bg-tertiary: var(--color-neutral-100);
        --color-border: var(--color-neutral-200);
        --color-border-strong: var(--color-neutral-300);
    }
}

/* ==================== SPACING ==================== */

:root {
    /* Spacing system - 4px base unit (Tailwind-style) */
    --spacing-0: 0;
    --spacing-1: 0.25rem;    /* 4px - Micro gaps */
    --spacing-2: 0.5rem;     /* 8px - Tight grouping */
    --spacing-3: 0.75rem;    /* 12px - Related elements */
    --spacing-4: 1rem;       /* 16px - Default spacing */
    --spacing-5: 1.25rem;    /* 20px */
    --spacing-6: 1.5rem;     /* 24px - Section padding */
    --spacing-8: 2rem;       /* 32px - Card padding, form groups */
    --spacing-10: 2.5rem;    /* 40px */
    --spacing-12: 3rem;      /* 48px - Between sections */
    --spacing-16: 4rem;      /* 64px - Section padding */
    --spacing-20: 5rem;      /* 80px - Hero padding, major sections */
    --spacing-24: 6rem;      /* 96px */
    --spacing-32: 8rem;      /* 128px - Page top/bottom */

    /* Legacy aliases for backward compatibility */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-2xl: var(--spacing-12);
    --spacing-3xl: var(--spacing-16);
    --spacing-4xl: var(--spacing-24);
}

/* ==================== TYPOGRAPHY ==================== */

:root {
    /* Font Families */
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;

    /* Font Sizes - Fluid Type Scale using clamp() */
    /* Major Third scale (1.25 ratio) - Base 16px */
    --font-size-xs: clamp(0.7rem,  0.65rem + 0.25vw, 0.75rem);   /* 11.2-12px */
    --font-size-sm: clamp(0.8rem,  0.75rem + 0.25vw, 0.875rem);  /* 12.8-14px */
    --font-size-base: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);       /* 15.2-16px */
    --font-size-lg: clamp(1.1rem,  1rem + 0.5vw, 1.25rem);       /* 17.6-20px */
    --font-size-xl: clamp(1.35rem, 1.2rem + 0.75vw, 1.563rem);   /* 21.6-25px */
    --font-size-2xl: clamp(1.6rem,  1.4rem + 1vw, 1.953rem);      /* 25.6-31.25px */
    --font-size-3xl: clamp(2rem,    1.7rem + 1.5vw, 2.441rem);     /* 32-39px */
    --font-size-4xl: clamp(2.4rem,  2rem + 2vw, 3.052rem);         /* 38.4-48.8px */
    --font-size-5xl: clamp(3rem,    2.5rem + 2.5vw, 4rem);         /* 48-64px */

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-tight: 1.15;      /* Headings */
    --line-height-snug: 1.3;        /* Subheadings */
    --line-height-normal: 1.6;      /* Body */
    --line-height-relaxed: 1.75;    /* Long-form */
    --line-height-loose: 2;         /* Extra spacing */

    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;   /* Headings */
    --letter-spacing-normal: 0;         /* Body */
    --letter-spacing-wide: 0.05em;      /* All-caps labels */
    --letter-spacing-wider: 0.1em;      /* Tiny labels */
}

/* ==================== BORDER RADIUS ==================== */

:root {
    --radius-none: 0;
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;
}

/* ==================== SHADOWS ==================== */

:root {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Dark mode — elevate shadows slightly */
/* Manual theme toggle */
:root[data-theme="dark"] {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
        --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.15);
        --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
        --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    }
}

/* ==================== TRANSITIONS ==================== */

:root {
    --transition-fast: 150ms;
    --transition-normal: 200ms;
    --transition-slow: 300ms;

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-base: var(--transition-normal) var(--ease-in-out);
    --transition-hover: var(--transition-fast) var(--ease-out);
    --transition-focus: var(--transition-fast) var(--ease-in-out);
}

/* ==================== Z-INDEX ==================== */

:root {
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
}

/* ==================== BREAKPOINTS ==================== */
/* Note: CSS custom properties cannot be used in @media queries directly.
   These are for documentation and JS usage. Use hardcoded values in media queries. */
:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ==================== FOCUS STYLES ==================== */

:root {
    --focus-ring: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-primary-default);
    --focus-ring-offset: 0 0 0 2px var(--color-primary-default);
}

/* ==================== CONTAINER WIDTHS ==================== */

:root {
    /* Container widths */
    --container-sm: 640px;   /* Auth forms, narrow content */
    --container-md: 768px;   /* Legal pages, articles */
    --container-lg: 1024px;  /* Dashboard content */
    --container-xl: 1200px;  /* Full-width sections */
    --container-2xl: 1400px; /* State of the Web dashboard */

    /* Legacy aliases for backward compatibility */
    --max-width-sm: var(--container-sm);
    --max-width-md: var(--container-md);
    --max-width-lg: var(--container-lg);
    --max-width-xl: var(--container-xl);
}