/**
 * GDC Design Tokens
 *
 * Three-layer token architecture:
 *   1. Primitive tokens — raw values from GOD.yaml
 *   2. Semantic tokens — purpose-driven aliases
 *   3. Component tokens — scoped overrides (defined per-component)
 *
 * This file defines layers 1 and 2. All values are injected via PHP
 * so they can be overridden with get_option() in WordPress.
 *
 * @package GDC
 * @since   1.0.0
 */

:root {

	/* ==========================================================
	   PRIMITIVE COLOR TOKENS — exact hex values from GOD.yaml
	   ========================================================== */

	/* Primary surfaces */
	--gdc-void:         #0A0A0A;
	--gdc-deep:         #0D1117;
	--gdc-abyss:        #141B24;
	--gdc-surface:      #1C2430;

	/* Brand accents */
	--gdc-purple:       #9B7FD4;
	--gdc-purple-light: #B9A4E3;
	--gdc-purple-dark:  #7B5FB8;
	--gdc-teal:         #4DD4C0;
	--gdc-teal-dark:    #2BA893;

	/* Text primitives */
	--gdc-white:        #FFFFFF;
	--gdc-white-muted:  #A0AEC0;
	--gdc-white-dim:    #6B7280;

	/* Utility */
	--gdc-danger:       #EF4444;
	--gdc-warning:      #F59E0B;
	--gdc-success:      #10B981;

	/* Gray scale (derived from surface palette) */
	--gdc-gray-900:     #0A0A0A;
	--gdc-gray-800:     #0D1117;
	--gdc-gray-700:     #141B24;
	--gdc-gray-600:     #1C2430;
	--gdc-gray-500:     #6B7280;
	--gdc-gray-400:     #A0AEC0;
	--gdc-gray-300:     #D1D5DB;
	--gdc-gray-200:     #E5E7EB;
	--gdc-gray-100:     #F3F4F6;

	/* Photography overlay */
	--gdc-overlay-dark:     rgba(10, 10, 10, 0.6);
	--gdc-overlay-gradient: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.8) 100%);

	/* ==========================================================
	   SEMANTIC COLOR TOKENS — purpose-driven aliases
	   ========================================================== */

	/* Text */
	--gdc-text-primary:   rgba(255, 255, 255, 0.95);
	--gdc-text-secondary: rgba(255, 255, 255, 0.65);
	--gdc-text-muted:     rgba(255, 255, 255, 0.40);
	--gdc-text-inverted:  var(--gdc-void);

	/* Background surfaces */
	--gdc-bg-void:    var(--gdc-void);
	--gdc-bg-deep:    var(--gdc-deep);
	--gdc-bg-abyss:   var(--gdc-abyss);
	--gdc-bg-surface: var(--gdc-surface);
	--gdc-bg-overlay: #2a2f4a;

	/* Interactive / accent */
	--gdc-accent-primary: var(--gdc-purple);
	--gdc-accent-cta:     var(--gdc-purple);
	--gdc-accent-hover:   var(--gdc-purple-light);
	--gdc-accent-active:  var(--gdc-purple-dark);
	--gdc-accent-focus:   0 0 0 3px rgba(155, 127, 212, 0.4);

	/* Secondary accent */
	--gdc-accent-secondary:      var(--gdc-teal);
	--gdc-accent-secondary-dark: var(--gdc-teal-dark);

	/* Status */
	--gdc-status-success: var(--gdc-success);
	--gdc-status-warning: var(--gdc-warning);
	--gdc-status-error:   var(--gdc-danger);
	--gdc-status-info:    #3B82F6;

	/* Danger variant shades */
	--gdc-danger-hover:  #dc2626;
	--gdc-danger-active: #b91c1c;

	/* Interactive backgrounds */
	--gdc-bg-hover: rgba(255, 255, 255, 0.04);

	/* Borders */
	--gdc-border-light:  rgba(255, 255, 255, 0.06);
	--gdc-border-medium: rgba(255, 255, 255, 0.12);
	--gdc-border-strong: rgba(255, 255, 255, 0.20);

	/* Alpha transparencies for overlay patterns */
	--gdc-alpha-5:  rgba(255, 255, 255, 0.05);
	--gdc-alpha-10: rgba(255, 255, 255, 0.10);
	--gdc-alpha-20: rgba(255, 255, 255, 0.20);
	--gdc-alpha-30: rgba(255, 255, 255, 0.30);
	--gdc-alpha-40: rgba(255, 255, 255, 0.40);
	--gdc-alpha-50: rgba(255, 255, 255, 0.50);
	--gdc-alpha-60: rgba(255, 255, 255, 0.60);
	--gdc-alpha-70: rgba(255, 255, 255, 0.70);
	--gdc-alpha-80: rgba(255, 255, 255, 0.80);
	--gdc-alpha-90: rgba(255, 255, 255, 0.90);

	/* Glass effect */
	--gdc-glass-bg:     rgba(20, 27, 36, 0.7);
	--gdc-glass-blur:   blur(20px) saturate(180%);
	--gdc-glass-border: 1px solid rgba(255, 255, 255, 0.08);

	/* Elevation / shadows */
	--gdc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--gdc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--gdc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
	--gdc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
	--gdc-shadow-glow-purple: 0 0 30px rgba(155, 127, 212, 0.15);
	--gdc-shadow-glow-teal:   0 0 30px rgba(77, 212, 192, 0.15);

	/* ==========================================================
	   SPACING TOKENS — 8px base scale
	   ========================================================== */

	--gdc-space-0:  0;
	--gdc-space-xs: 0.25rem;  /*  4px */
	--gdc-space-1:  0.5rem;   /*  8px */
	--gdc-space-2:  1rem;     /* 16px */
	--gdc-space-3:  1.5rem;   /* 24px */
	--gdc-space-4:  2rem;     /* 32px */
	--gdc-space-5:  2.5rem;   /* 40px */
	--gdc-space-6:  3rem;     /* 48px */
	--gdc-space-7:  3.5rem;   /* 56px */
	--gdc-space-8:  4rem;     /* 64px */
	--gdc-space-9:  4.5rem;   /* 72px */
	--gdc-space-10: 5rem;     /* 80px */
	--gdc-space-11: 5.5rem;   /* 88px */
	--gdc-space-12: 6rem;     /* 96px */
	--gdc-space-16: 8rem;     /* 128px */

	/* Section padding */
	--gdc-section-py-mobile:  4rem;    /* 64px */
	--gdc-section-px-mobile:  1.25rem; /* 20px */
	--gdc-section-py-desktop: 6rem;    /* 96px */
	--gdc-section-px-desktop: 3rem;    /* 48px */

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

	/* Font families */
	--gdc-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--gdc-font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--gdc-font-body:    var(--gdc-font-sans);

	/* Font weights */
	--gdc-font-light:    300;
	--gdc-font-regular:  400;
	--gdc-font-medium:   500;
	--gdc-font-semibold: 600;
	--gdc-font-bold:     700;

	/* Font sizes (rem, 16px base) */
	--gdc-text-xs:   0.75rem;   /* 12px */
	--gdc-text-sm:   0.875rem;  /* 14px */
	--gdc-text-base: 1rem;      /* 16px */
	--gdc-text-lg:   1.125rem;  /* 18px */
	--gdc-text-xl:   1.25rem;   /* 20px */
	--gdc-text-2xl:  1.5rem;    /* 24px */
	--gdc-text-3xl:  1.75rem;   /* 28px */
	--gdc-text-4xl:  2rem;      /* 32px */
	--gdc-text-5xl:  2.5rem;    /* 40px */
	--gdc-text-6xl:  3rem;      /* 48px */
	--gdc-text-7xl:  3.5rem;    /* 56px */
	--gdc-text-8xl:  4rem;      /* 64px */
	--gdc-text-9xl:  4.5rem;    /* 72px */

	/* Line heights */
	--gdc-leading-none:    1;
	--gdc-leading-tight:   1.05;
	--gdc-leading-snug:    1.2;
	--gdc-leading-normal:  1.5;
	--gdc-leading-relaxed: 1.7;
	--gdc-leading-loose:   1.75;

	/* Letter spacing */
	--gdc-tracking-tighter: -0.03em;
	--gdc-tracking-tight:   -0.02em;
	--gdc-tracking-normal:  0;
	--gdc-tracking-wide:    0.01em;
	--gdc-tracking-wider:   0.05em;

	/* ==========================================================
	   ANIMATION & TIMING TOKENS
	   ========================================================== */

	/* Durations */
	--gdc-duration-fast:     150ms;
	--gdc-duration-standard: 300ms;
	--gdc-duration-slow:     500ms;
	--gdc-duration-slower:   600ms;
	--gdc-duration-reveal:   800ms;
	--gdc-duration-cinematic: 1000ms;

	/* Easing */
	--gdc-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--gdc-ease-out:     ease-out;
	--gdc-ease-spring:  cubic-bezier(0.4, 0, 0.2, 1);
	--gdc-ease-image:   cubic-bezier(0.4, 0, 0.2, 1);

	/* Composite transitions */
	--gdc-transition-hover: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	/* Scroll animation */
	--gdc-scroll-fade-duration: 0.6s;
	--gdc-scroll-fade-delay:    0.1s;
	--gdc-scroll-slide-distance: 30px;

	/* Parallax */
	--gdc-parallax-factor: 0.15;

	/* Grain texture */
	--gdc-grain-opacity: 0.03;

	/* ==========================================================
	   BREAKPOINTS (reference values — use in media queries)
	   ========================================================== */

	--gdc-bp-sm:  640px;
	--gdc-bp-md:  768px;
	--gdc-bp-lg:  1024px;
	--gdc-bp-xl:  1280px;
	--gdc-bp-2xl: 1536px;

	/* Convenience aliases: tablet = md, desktop = content-width breakpoint.
	   Use lg (1024px) for general large-screen adjustments (typography, skeleton).
	   Use desktop (1200px) for full content-width layout shifts. */
	--gdc-bp-tablet:  768px;
	--gdc-bp-desktop: 1200px;

	/* ==========================================================
	   LAYOUT / MAX WIDTH TOKENS
	   ========================================================== */

	--gdc-max-content:    1200px;
	--gdc-max-narrow:     800px;
	--gdc-max-wide:       1400px;
	--gdc-max-full-bleed: 100%;

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

	--gdc-radius-sm:   4px;
	--gdc-radius-md:   8px;
	--gdc-radius-lg:   12px;
	--gdc-radius-xl:   16px;
	--gdc-radius-2xl:  24px;
	--gdc-radius-full: 9999px;
	--gdc-radius-card:   12px;
	--gdc-radius-button: 8px;
	--gdc-radius-input:  8px;

	/* ==========================================================
	   TOUCH / INTERACTION TOKENS
	   ========================================================== */

	--gdc-tap-target-primary:   56px;
	--gdc-tap-target-secondary: 44px;
	--gdc-tap-target-inline:    24px;

	/* ==========================================================
	   EFFECTS TOKENS
	   ========================================================== */

	--gdc-image-hover-scale: 1.03;
	--gdc-image-hover-transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	--gdc-card-hover-transform: translateY(-4px);
	--gdc-card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}