/**
 * Axiom Aesthetics — Design Token System v2.0
 * Champagne Gold (#B8945F) + Deep Teal (#0D5C5C) + Warm Ivory (#FAF8F4)
 * Ultra-luxury medical aesthetics — refined palette
 */

:root {
    /* ===== PRIMARY: Deep Teal (refined — slightly deeper) ===== */
    --color-primary-50:  #e4f2f2;
    --color-primary-100: #b0dada;
    --color-primary-200: #7cc2c2;
    --color-primary-300: #48aaaa;
    --color-primary-400: #1f9292;
    --color-primary-500: #0D7A7A;
    --color-primary:     #0D5C5C;
    --color-primary-600: #0D5C5C;
    --color-primary-700: #0A4A4A;
    --color-primary-800: #073838;
    --color-primary-900: #042626;
    --color-primary-950: #021313;

    /* ===== SECONDARY: Champagne Gold (refined — warmer, more sophisticated) ===== */
    --color-secondary-50:  #FBF7F0;
    --color-secondary-100: #F2EADB;
    --color-secondary-200: #E8DCC4;
    --color-secondary-300: #D4BC8A;
    --color-secondary-400: #C4A872;
    --color-secondary:     #B8945F;
    --color-secondary-500: #B8945F;
    --color-secondary-600: #A68350;
    --color-secondary-700: #8C6E42;
    --color-secondary-800: #725935;
    --color-secondary-900: #584428;
    --color-secondary-950: #3E2F1C;

    /* ===== ACCENT: Navy (refined — deeper, richer) ===== */
    --color-accent:     #141428;
    --color-accent-50:  #E6E6EA;
    --color-accent-100: #C1C1CB;
    --color-accent-200: #9898AC;
    --color-accent-300: #70708D;
    --color-accent-400: #50506E;
    --color-accent-500: #31314F;
    --color-accent-600: #272742;
    --color-accent-700: #1E1E35;
    --color-accent-800: #141428;
    --color-accent-900: #0B0B1B;

    /* ===== CREAM BACKGROUNDS (refined — warmer ivory) ===== */
    --color-cream:       #FAF8F4;
    --color-cream-dark:  #F4F0E8;
    --color-cream-darker:#EBE5D9;

    /* ===== NEUTRALS ===== */
    --color-white:       #ffffff;
    --color-gray-50:     #f9fafb;
    --color-gray-100:    #f3f4f6;
    --color-gray-200:    #e5e7eb;
    --color-gray-300:    #d1d5db;
    --color-gray-400:    #9ca3af;
    --color-gray-500:    #6b7280;
    --color-gray-600:    #4b5563;
    --color-gray-700:    #374151;
    --color-gray-800:    #1f2937;
    --color-gray-900:    #111827;
    --color-black:       #0a0a0a;

    /* ===== SEMANTIC ===== */
    --color-success:     #059669;
    --color-success-bg:  #ecfdf5;
    --color-warning:     #d97706;
    --color-warning-bg:  #fffbeb;
    --color-error:       #dc2626;
    --color-error-bg:    #fef2f2;
    --color-info:        #0284c7;
    --color-info-bg:     #f0f9ff;

    /* ===== TEXT ===== */
    --color-text:        #141428;
    --color-text-secondary: #4b5563;
    --color-text-light:  #6b7280;
    --color-text-lighter:#5c646d; /* Darkened from #707882 for WCAG AA 4.5:1 (5.66:1) on cream bg */
    --color-text-on-dark:#FAF8F4;
    --color-text-on-gold:#141428;
    --color-secondary-text:#906B2D; /* WCAG AA safe gold for text on white (4.85:1) and cream (4.58:1) */

    /* ===== BACKGROUNDS ===== */
    --color-bg:          #FAF8F4;
    --color-bg-alt:      #F4F0E8;
    --color-bg-dark:     #141428;
    --color-bg-teal:     #0D5C5C;

    /* ===== BORDERS ===== */
    --color-border:      #e5e7eb;
    --color-border-light:#f3f4f6;
    --color-border-gold: rgba(184, 148, 95, 0.3);

    /* ===== GRADIENTS (refined — more depth, micro-shimmer) ===== */
    --gradient-gold:     linear-gradient(135deg, #B8945F 0%, #D4BC8A 35%, #C4A872 65%, #B8945F 100%);
    --gradient-gold-shimmer: linear-gradient(110deg, #B8945F 0%, #D4BC8A 20%, #F2EADB 40%, #E8DCC4 60%, #D4BC8A 80%, #B8945F 100%);
    --gradient-teal:     linear-gradient(135deg, #042626 0%, #0D5C5C 100%);
    --gradient-dark:     linear-gradient(135deg, #141428 0%, #272742 100%);
    --gradient-cream:    linear-gradient(180deg, #FAF8F4 0%, #F4F0E8 100%);
    --gradient-hero:     linear-gradient(160deg, rgba(20, 20, 40, 0.88) 0%, rgba(20, 20, 40, 0.6) 40%, rgba(13, 92, 92, 0.5) 100%);

    /* ===== TYPOGRAPHY ===== */
    --font-heading:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:      'JetBrains Mono', 'Fira Code', Consolas, monospace;

    /* Fluid type scale */
    --text-xs:    clamp(0.694rem, 0.66rem + 0.17vw, 0.8rem);
    --text-sm:    clamp(0.8rem, 0.75rem + 0.25vw, 0.95rem);
    --text-base:  clamp(0.938rem, 0.875rem + 0.31vw, 1.125rem);
    --text-lg:    clamp(1.063rem, 0.975rem + 0.44vw, 1.35rem);
    --text-xl:    clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
    --text-2xl:   clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --text-3xl:   clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
    --text-4xl:   clamp(2.25rem, 1.75rem + 2.5vw, 4rem);
    --text-5xl:   clamp(2.75rem, 2rem + 3.75vw, 5rem);

    /* Font weights */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold:600;
    --weight-bold:    700;

    /* Line heights */
    --leading-none:   1;
    --leading-tight:  1.15;
    --leading-snug:   1.3;
    --leading-normal: 1.6;
    --leading-relaxed:1.75;

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.05em;
    --tracking-wider:  0.1em;
    --tracking-widest: 0.2em;
    --tracking-heading: -0.02em;

    /* ===== SPACING (8px grid) ===== */
    --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 */
    --space-32:  8rem;     /* 128px */

    /* Section padding (refined luxury spacing — tighter rhythm) */
    --section-padding: clamp(3.5rem, 6vw, 5.5rem);
    --section-padding-sm: clamp(2.5rem, 4vw, 3.5rem);

    /* ===== LAYOUT ===== */
    --container-max:  1440px;
    --container-wide: 1520px;
    --container-narrow: 720px;

    /* ===== BORDER RADIUS ===== */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-full: 9999px;

    /* ===== SHADOWS (elevation) ===== */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:      0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
    --shadow-md:   0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.03);
    --shadow-lg:   0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03);
    --shadow-xl:   0 25px 50px rgba(0, 0, 0, 0.12);
    --shadow-gold: 0 4px 20px rgba(184, 148, 95, 0.25);
    --shadow-teal: 0 4px 20px rgba(13, 92, 92, 0.2);

    /* ===== Z-INDEX ===== */
    --z-dropdown:  10;
    --z-sticky:    20;
    --z-fixed:     30;
    --z-backdrop:  40;
    --z-modal:     50;
    --z-popover:   60;
    --z-tooltip:   70;

    /* ===== MOTION / EASING ===== */
    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --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);
    --ease-luxury:   cubic-bezier(0.22, 1, 0.36, 1);

    --duration-fast:    150ms;
    --duration-normal:  250ms;
    --duration-slow:    400ms;
    --duration-slower:  600ms;

    /* ===== GLASSMORPHISM ===== */
    --glass-bg:     rgba(250, 248, 244, 0.8);
    --glass-border: rgba(184, 148, 95, 0.15);
    --glass-blur:   blur(12px);

    /* ===== FOCUS / A11Y ===== */
    --focus-ring-color: rgba(13, 92, 92, 0.7);
    --focus-ring-offset: 2px;
    --focus-ring-width: 3px;
    --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

    /* ===== OVERLAYS ===== */
    --overlay-light: rgba(250, 248, 244, 0.85);
    --overlay-dark:  rgba(20, 20, 40, 0.6);
    --overlay-heavy: rgba(20, 20, 40, 0.85);

    /* ===== SKELETON LOADING ===== */
    --skeleton-base: #e5e7eb;
    --skeleton-shine: #f3f4f6;

    /* ===== FORM STATES ===== */
    --input-bg:           var(--color-white);
    --input-border:       var(--color-border);
    --input-border-focus: var(--color-primary);
    --input-border-error: var(--color-error);
    --input-border-success: var(--color-success);
    --input-radius:       var(--radius);
    --input-padding:      0.75rem 1rem;
    --input-font-size:    var(--text-base);
    --input-placeholder:  var(--color-text-lighter);

    /* ===== HEADER ===== */
    --header-height: 80px;
    --top-bar-height: 40px;

    /* ===== ASPECT RATIOS ===== */
    --ratio-square: 1 / 1;
    --ratio-video: 16 / 9;
    --ratio-photo: 4 / 3;
    --ratio-portrait: 3 / 4;
    --ratio-wide: 21 / 9;

    /* ===== V8.0 ENHANCED TOKENS ===== */

    /* Container queries breakpoints */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;

    /* Enhanced gradient collection */
    --gradient-gold-subtle: linear-gradient(135deg, rgba(184, 148, 95, 0.08) 0%, rgba(184, 148, 95, 0.15) 100%);
    --gradient-teal-subtle: linear-gradient(135deg, rgba(13, 92, 92, 0.06) 0%, rgba(13, 92, 92, 0.12) 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(184, 148, 95, 0.06) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(13, 92, 92, 0.04) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(184, 148, 95, 0.04) 0px, transparent 50%);
    --gradient-shine: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%);

    /* Premium shadows for luxury feel */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(184, 148, 95, 0.08);
    --shadow-elevated: 0 20px 50px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.04);
    --shadow-inner-gold: inset 0 1px 0 rgba(184, 148, 95, 0.1), inset 0 -1px 0 rgba(184, 148, 95, 0.05);

    /* Glassmorphism */
    --glass-light: rgba(255, 255, 255, 0.65);
    --glass-dark: rgba(20, 20, 40, 0.7);
    --glass-gold: rgba(184, 148, 95, 0.1);
    --glass-blur-strong: blur(20px);
    --glass-blur-subtle: blur(8px);

    /* Content widths */
    --content-reading: 68ch;
    --content-wide: 80ch;
    --content-full: 100%;

    /* Minimum touch target (WCAG) */
    --touch-min: 44px;
}

/* ===== DARK MODE: Toggle-based via [data-theme="dark"] on <html> ===== */
[data-theme="dark"] {
    /* Backgrounds — dark navy surfaces
       NOTE: --color-cream and --color-white are NOT overridden here because
       they're used as BOTH background colors AND text colors (e.g. "cream text
       on dark headers"). Overriding them causes invisible text (dark-on-dark).
       Background switching is handled by --color-bg/--color-bg-alt overrides
       plus the 1,600+ per-element [data-theme="dark"] rules in main.css. */
    --color-bg:          #121220;
    --color-bg-alt:      #1a1a30;
    --color-bg-dark:     #0a0a18;
    --color-bg-teal:     #073838;

    /* Text — light on dark */
    --color-text:            #e8e6e1;
    --color-text-secondary:  #9ca3af;
    --color-text-light:      #8888a0;
    --color-text-lighter:    #7a7a94;
    --color-text-on-dark:    #e8e6e1;
    --color-text-on-gold:    #141428;
    --color-secondary-text:  #B8945F; /* Gold IS accessible on dark bg (5.5:1 on #121220) */

    /* Gray scale — inverted for dark surfaces */
    --color-gray-50:  #111827;
    --color-gray-100: #1f2937;
    --color-gray-200: #374151;
    --color-gray-300: #4b5563;
    --color-gray-400: #6b7280;
    --color-gray-500: #9ca3af;
    --color-gray-600: #d1d5db;
    --color-gray-700: #e5e7eb;
    --color-gray-800: #f3f4f6;
    --color-gray-900: #f9fafb;
    --color-black:    #f5f5f5;

    /* Borders — subtle on dark */
    --color-border:      #2a2a42;
    --color-border-light:#1e1e35;
    --color-border-gold: rgba(184, 148, 95, 0.25);

    /* Semantic — darker alert backgrounds */
    --color-success-bg:  #052e16;
    --color-warning-bg:  #451a03;
    --color-error-bg:    #450a0a;
    --color-info-bg:     #0c2840;

    /* Gradients — dark equivalents */
    --gradient-cream:    linear-gradient(180deg, #121220 0%, #1a1a30 100%);
    --gradient-gold-subtle: linear-gradient(135deg, rgba(184, 148, 95, 0.06) 0%, rgba(184, 148, 95, 0.12) 100%);
    --gradient-teal-subtle: linear-gradient(135deg, rgba(13, 92, 92, 0.08) 0%, rgba(13, 92, 92, 0.15) 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(184, 148, 95, 0.04) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, rgba(13, 92, 92, 0.06) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(184, 148, 95, 0.03) 0px, transparent 50%);
    --gradient-shine: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0.03) 50%, transparent 55%);

    /* Shadows — reduced on dark surfaces */
    --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:      0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-md:   0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-lg:   0 20px 25px rgba(0, 0, 0, 0.35), 0 10px 10px rgba(0, 0, 0, 0.2);
    --shadow-xl:   0 25px 50px rgba(0, 0, 0, 0.4);
    --shadow-gold: 0 4px 20px rgba(184, 148, 95, 0.15);
    --shadow-teal: 0 4px 20px rgba(13, 92, 92, 0.15);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(184, 148, 95, 0.12);
    --shadow-elevated: 0 20px 50px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.2);
    --shadow-inner-gold: inset 0 1px 0 rgba(184, 148, 95, 0.08), inset 0 -1px 0 rgba(184, 148, 95, 0.04);

    /* Glassmorphism — dark glass */
    --glass-bg:     rgba(20, 20, 40, 0.8);
    --glass-border: rgba(184, 148, 95, 0.12);
    --glass-light:  rgba(30, 30, 53, 0.7);
    --glass-dark:   rgba(10, 10, 24, 0.85);
    --glass-gold:   rgba(184, 148, 95, 0.08);

    /* Link color — lighter teal for WCAG AA 4.5:1 on dark backgrounds */
    --color-link: #48aaaa;
    --color-link-hover: #7cc2c2;

    /* Focus / A11Y — brighter ring on dark */
    --focus-ring-color: rgba(13, 122, 122, 0.8);

    /* Overlays */
    --overlay-light: rgba(20, 20, 40, 0.85);
    --overlay-dark:  rgba(0, 0, 0, 0.5);
    --overlay-heavy: rgba(0, 0, 0, 0.75);

    /* Skeleton loading */
    --skeleton-base: #1e1e35;
    --skeleton-shine: #2a2a42;

    /* Form states */
    --input-bg:           #1e1e35;
    --input-border:       #2a2a42;
    --input-placeholder:  #7a7a94;

    /* WordPress preset overrides — body bg/text from theme.json
       These are ONLY used in theme.json styles block (body bg & text color).
       Unlike --color-cream/--color-white, WP presets aren't used as text colors
       in component CSS, so they're safe to override. */
    --wp--preset--color--cream: #121220;
    --wp--preset--color--cream-dark: #141428;
    --wp--preset--color--dark:  #e8e6e1;
    --wp--preset--color--light-gray: #2a2a42;
    --wp--preset--color--accent: #e8e6e1;
}