/* ===================================================================
   Cold Stone Creamery - Design Tokens & Foundation
   Layer order: reset → tokens → components → utilities
   =================================================================== */

@layer reset, tokens, components, utilities;

@layer reset {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

@layer tokens {
    :root {
        /* === Fluid Typography Scale === */
        --text-xs:   clamp(0.694rem, 0.65rem + 0.22vw, 0.833rem);
        --text-sm:   clamp(0.833rem, 0.78rem + 0.27vw, 1rem);
        --text-base: clamp(1rem, 0.93rem + 0.36vw, 1.2rem);
        --text-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.44rem);
        --text-xl:   clamp(1.44rem, 1.3rem + 0.7vw, 1.728rem);
        --text-2xl:  clamp(1.728rem, 1.5rem + 1.14vw, 2.488rem);
        --text-3xl:  clamp(2.074rem, 1.75rem + 1.62vw, 3.583rem);

        /* Primary Brand Colors */
        --coldstone-brown: #5D4037;
        --coldstone-brown-dark: #3E2723;
        --coldstone-brown-light: #8D6E63;
        --coldstone-red: #C62828;
        --coldstone-red-dark: #B71C1C;
        --coldstone-red-light: #E57373;
        --coldstone-cream: #FFF8DC;
        --coldstone-cream-dark: #F5E6C8;

        /* Status Colors (WCAG 2.1 AA compliant - 4.5:1 contrast on white) */
        --status-success: #1e7e34;
        --status-warning: #b36b00;
        --status-error: #dc3545;
        --status-info: #117a8b;

        /* Accessible text colors (4.5:1+ contrast on white) */
        --text-muted-accessible: #595959;
        --text-positive: #047857;

        /* Semantic Color Aliases (used in templates) */
        --success-color: var(--status-success);
        --warning-color: var(--status-warning);
        --error-color: var(--status-error);
        --info-color: var(--status-info);

        /* Glass Effect Variables */
        --glass-bg: rgba(255, 255, 255, 0.95);
        --glass-border: rgba(0, 0, 0, 0.1);
        --text-muted: var(--gray-500);

        /* Gray Scale */
        --gray-50: #F9FAFB;
        --gray-100: #F3F4F6;
        --gray-200: #E5E7EB;
        --gray-300: #D1D5DB;
        --gray-400: #9CA3AF;
        --gray-500: #6B7280;
        --gray-600: #4B5563;
        --gray-700: #374151;
        --gray-800: #1F2937;
        --gray-900: #111827;

        /* Theme Variables (can be overridden) */
        --primary-color: var(--coldstone-brown);
        --primary-dark: var(--coldstone-brown-dark);
        --primary-light: var(--coldstone-brown-light);
        --accent-color: var(--coldstone-red);
        --accent-dark: var(--coldstone-red-dark);
        --accent-light: var(--coldstone-red-light);
        --bg-gradient-start: var(--coldstone-brown);
        --bg-gradient-mid: var(--coldstone-brown-light);
        --bg-gradient-end: var(--coldstone-red);
        --card-bg: rgba(255, 255, 255, 0.98);
        --text-primary: var(--gray-900);
        --text-secondary: var(--gray-700);
        --link-color: #B71C1C;
        --table-header-gradient: linear-gradient(135deg, var(--coldstone-brown) 0%, var(--coldstone-red) 100%);
        --table-border-color: #eee;
        --table-hover-bg: #f9f9f9;
        --input-bg: white;
        --input-border: #ddd;
        --surface-color: white;
        --border-color: #ddd;

        /* Dynamic Color Derivatives */
        --status-success-bg: color-mix(in oklch, var(--status-success) 12%, white);
        --status-warning-bg: color-mix(in oklch, var(--status-warning) 12%, white);
        --status-error-bg: color-mix(in oklch, var(--status-error) 12%, white);
        --status-info-bg: color-mix(in oklch, var(--status-info) 12%, white);
    }

    /* ===== DARK THEME ===== */
    [data-theme="dark"] {
        --primary-color: var(--coldstone-brown-light);
        --primary-dark: var(--coldstone-brown);
        --primary-light: #A1887F;
        --accent-color: var(--coldstone-red-light);
        --accent-dark: var(--coldstone-red);
        --accent-light: #EF9A9A;
        --bg-gradient-start: #1F2937;
        --bg-gradient-mid: #374151;
        --bg-gradient-end: #4B5563;
        --card-bg: rgba(31, 41, 55, 0.98);
        --text-primary: #F9FAFB;
        --text-secondary: #E5E7EB;
        --text-muted: var(--gray-400);
        --link-color: #EF9A9A;
        --glass-bg: rgba(31, 41, 55, 0.95);
        --glass-border: rgba(255, 255, 255, 0.1);
        --table-header-gradient: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-600) 100%);
        --table-border-color: var(--gray-700);
        --table-hover-bg: var(--gray-700);
        --input-bg: var(--gray-700);
        --input-border: var(--gray-600);
        --surface-color: var(--gray-700);
        --border-color: var(--gray-600);
    }
}

/* ===== VIEW TRANSITIONS (MPA cross-document) ===== */
@view-transition {
    navigation: auto;
}

::view-transition-old(page-title) {
    animation: 0.2s ease-out both vt-fade-out;
}

::view-transition-new(page-title) {
    animation: 0.3s ease-in both vt-slide-up;
}

@keyframes vt-fade-out {
    to { opacity: 0; }
}

@keyframes vt-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}