/**
 * Klaritee Child Theme - Block Styles
 * 
 * This stylesheet contains ALL layout, component, and structural CSS
 * to exactly match the refined React application.
 * 
 * Design Philosophy:
 * - Field condition aesthetics (not visual effects)
 * - NASA-grade spacing and restraint
 * - Research-institution precision
 * - Engineering credibility over marketing appeal
 * 
 * Refinement Principles Applied:
 * - 85-90% reduced glow intensities
 * - 2-2.5x increased blur softness
 * - 2-3x slower animations
 * - Monospace fonts for technical elements
 * - Reduced border/divider opacities
 * 
 * @package Klaritee_Child
 * @since 1.0.0
 */

/* ============================================
   1. CSS VARIABLES (Design Tokens)
   ============================================ */

:root {
  /* Colors - Exact from React */
  --kt-black: #0A0A0C;
  --kt-charcoal: #111214;
  --kt-deep-indigo: #0F1A3A;
  --kt-cyan: #00D4FF;
  --kt-gold: #F5C98A;
  --kt-white: #F4F7FA;
  
  /* Glow Opacities - REFINED (85-90% reduction) */
  --kt-glow-cyan-ambient: 0.02;
  --kt-glow-cyan-ambient-hover: 0.025;
  --kt-glow-gold-ambient: 0.015;
  --kt-glow-cyan-active: 0.12;
  --kt-glow-cyan-development: 0.08;
  --kt-glow-cyan-inactive: 0.03;
  --kt-glow-shield: 0.12;
  
  /* Blur Amounts - REFINED (2-2.5x increase) */
  --kt-blur-ambient: 160px;
  --kt-blur-field: 140px;
  --kt-blur-glow: 80px;
  --kt-blur-soft: 120px;
  --kt-blur-ripple: 200px;
  
  /* Animation Durations - REFINED (2-3x slower) */
  --kt-anim-ambient: 28s;
  --kt-anim-field: 32s;
  --kt-anim-ripple: 35s;
  --kt-anim-slow: 35s;
  --kt-anim-base: 1s;
  --kt-anim-medium: 1.1s;
  --kt-anim-long: 1.3s;
  
  /* Border & Divider Opacities - REFINED (40% reduction) */
  --kt-border-subtle: rgba(0, 212, 255, 0.06);
  --kt-border-medium: rgba(0, 212, 255, 0.08);
  --kt-border-card: rgba(0, 212, 255, 0.1);
  
  /* Text Opacities - REFINED */
  --kt-text-subtle: 0.35;
  --kt-text-medium: 0.4;
  --kt-text-visible: 0.65;
  --kt-text-prominent: 0.8;
  
  /* Spacing Scale - NASA-grade */
  --kt-space-1: 0.25rem;    /* 4px */
  --kt-space-2: 0.5rem;     /* 8px */
  --kt-space-3: 0.75rem;    /* 12px */
  --kt-space-4: 1rem;       /* 16px */
  --kt-space-5: 1.25rem;    /* 20px */
  --kt-space-6: 1.5rem;     /* 24px */
  --kt-space-8: 2rem;       /* 32px */
  --kt-space-10: 2.5rem;    /* 40px */
  --kt-space-12: 3rem;      /* 48px */
  --kt-space-16: 4rem;      /* 64px */
  --kt-space-20: 5rem;      /* 80px */
  --kt-space-24: 6rem;      /* 96px */
  --kt-space-28: 7rem;      /* 112px */
  --kt-space-32: 8rem;      /* 128px */
  --kt-space-40: 10rem;     /* 160px */
  --kt-space-48: 12rem;     /* 192px */
  
  /* Container Widths */
  --kt-container-sm: 40rem;   /* 640px */
  --kt-container-md: 48rem;   /* 768px */
  --kt-container-lg: 64rem;   /* 1024px */
  --kt-container-xl: 80rem;   /* 1280px */
  --kt-container-2xl: 96rem;  /* 1536px */
  
  /* Typography */
  --kt-font-light: 300;
  --kt-font-normal: 400;
  --kt-font-medium: 500;
  
  /* Line Heights */
  --kt-leading-tight: 1.1;
  --kt-leading-snug: 1.3;
  --kt-leading-normal: 1.5;
  --kt-leading-relaxed: 1.65;
  --kt-leading-loose: 2;
  --kt-leading-extra-loose: 2.2;
  
  /* Letter Spacing */
  --kt-tracking-tighter: -0.02em;
  --kt-tracking-tight: -0.01em;
  --kt-tracking-normal: 0;
  --kt-tracking-wide: 0.02em;
  --kt-tracking-wider: 0.04em;
  --kt-tracking-widest: 0.08em;
  --kt-tracking-ultra: 0.18em;
  
  /* Transitions */
  --kt-transition-fast: 200ms ease;
  --kt-transition-base: 300ms ease;
  --kt-transition-slow: 500ms ease;
}

/* ============================================
   2. RESET & BASE STYLES
   ============================================ */

/* Remove default WordPress block spacing */
.wp-site-blocks,
.wp-block-post-content {
  padding: 0 !important;
}

/* Remove default Twenty Twenty-Four padding */
body {
  margin: 0;
  padding: 0;
}

/* Remove default block gaps */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ============================================
   3. LAYOUT SYSTEM
   ============================================ */

/**
 * Section Wrapper (.kt-section)
 * - Full-width container
 * - Handles background colors/gradients
 * - Relative positioning for absolute backgrounds
 */
.kt-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Section Variants - Exact padding from React */
.kt-section--hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--kt-space-40);
  padding-bottom: var(--kt-space-40);
}

.kt-section--default {
  padding-top: var(--kt-space-32);
  padding-bottom: var(--kt-space-32);
}

.kt-section--large {
  padding-top: var(--kt-space-48);
  padding-bottom: var(--kt-space-48);
}

.kt-section--small {
  padding-top: var(--kt-space-20);
  padding-bottom: var(--kt-space-20);
}

/**
 * Container (.kt-container)
 * - Max-width with horizontal padding
 * - Centers content
 */
.kt-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--kt-space-8);
  padding-right: var(--kt-space-8);
}

.kt-container--sm {
  max-width: var(--kt-container-sm);
}

.kt-container--md {
  max-width: var(--kt-container-md);
}

.kt-container--lg {
  max-width: var(--kt-container-lg);
}

.kt-container--xl {
  max-width: var(--kt-container-xl);
}

.kt-container--2xl {
  max-width: var(--kt-container-2xl);
}

/* ============================================
   4. BACKGROUND COLORS
   ============================================ */

.kt-bg-black {
  background-color: var(--kt-black);
}

.kt-bg-charcoal {
  background-color: var(--kt-charcoal);
}

.kt-bg-deep-indigo {
  background-color: var(--kt-deep-indigo);
}

.kt-bg-gradient-hero {
  background: linear-gradient(180deg, #111214 0%, #0F1A3A 50%, #111214 100%);
}

/* ============================================
   5. TYPOGRAPHY UTILITIES
   ============================================ */

.kt-text-cyan {
  color: var(--kt-cyan);
}

.kt-text-gold {
  color: var(--kt-gold);
}

.kt-text-white {
  color: var(--kt-white);
}

/* Text Opacity Variants - Refined */
.kt-text-opacity-35 {
  opacity: var(--kt-text-subtle);
}

.kt-text-opacity-40 {
  opacity: var(--kt-text-medium);
}

.kt-text-opacity-50 {
  opacity: 0.5;
}

.kt-text-opacity-60 {
  opacity: 0.6;
}

.kt-text-opacity-65 {
  opacity: var(--kt-text-visible);
}

.kt-text-opacity-70 {
  opacity: 0.7;
}

.kt-text-opacity-80 {
  opacity: var(--kt-text-prominent);
}

.kt-text-opacity-85 {
  opacity: 0.85;
}

/* Font Weights */
.kt-font-light {
  font-weight: var(--kt-font-light);
}

.kt-font-normal {
  font-weight: var(--kt-font-normal);
}

.kt-font-medium {
  font-weight: var(--kt-font-medium);
}

/* Font Families */
.kt-font-mono {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

.kt-font-serif {
  font-family: Georgia, 'Times New Roman', serif;
}

/* Letter Spacing */
.kt-tracking-tighter {
  letter-spacing: var(--kt-tracking-tighter);
}

.kt-tracking-tight {
  letter-spacing: var(--kt-tracking-tight);
}

.kt-tracking-normal {
  letter-spacing: var(--kt-tracking-normal);
}

.kt-tracking-wide {
  letter-spacing: var(--kt-tracking-wide);
}

.kt-tracking-wider {
  letter-spacing: var(--kt-tracking-wider);
}

.kt-tracking-widest {
  letter-spacing: var(--kt-tracking-widest);
}

/* Line Heights */
.kt-leading-tight {
  line-height: var(--kt-leading-tight);
}

.kt-leading-snug {
  line-height: var(--kt-leading-snug);
}

.kt-leading-normal {
  line-height: var(--kt-leading-normal);
}

.kt-leading-relaxed {
  line-height: var(--kt-leading-relaxed);
}

.kt-leading-loose {
  line-height: var(--kt-leading-loose);
}

/* Text Alignment */
.kt-text-center {
  text-align: center;
}

.kt-text-left {
  text-align: left;
}

.kt-text-right {
  text-align: right;
}

/* ============================================
   6. SPACING UTILITIES
   ============================================ */

/* Margin Bottom */
.kt-mb-4 { margin-bottom: var(--kt-space-4); }
.kt-mb-6 { margin-bottom: var(--kt-space-6); }
.kt-mb-8 { margin-bottom: var(--kt-space-8); }
.kt-mb-10 { margin-bottom: var(--kt-space-10); }
.kt-mb-12 { margin-bottom: var(--kt-space-12); }
.kt-mb-16 { margin-bottom: var(--kt-space-16); }
.kt-mb-20 { margin-bottom: var(--kt-space-20); }
.kt-mb-24 { margin-bottom: var(--kt-space-24); }
.kt-mb-28 { margin-bottom: var(--kt-space-28); }

/* Margin Top */
.kt-mt-12 { margin-top: var(--kt-space-12); }
.kt-mt-16 { margin-top: var(--kt-space-16); }
.kt-mt-20 { margin-top: var(--kt-space-20); }
.kt-mt-24 { margin-top: var(--kt-space-24); }
.kt-mt-28 { margin-top: var(--kt-space-28); }

/* Padding Top */
.kt-pt-12 { padding-top: var(--kt-space-12); }
.kt-pt-16 { padding-top: var(--kt-space-16); }
.kt-pt-20 { padding-top: var(--kt-space-20); }

/* ============================================
   7. LAYOUT UTILITIES
   ============================================ */

.kt-relative {
  position: relative;
}

.kt-absolute {
  position: absolute;
}

.kt-z-10 {
  z-index: 10;
}

.kt-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.kt-max-w-md {
  max-width: 48rem;
}

.kt-max-w-lg {
  max-width: 64rem;
}

.kt-max-w-xl {
  max-width: 80rem;
}

/* ============================================
   8. FLEX UTILITIES
   ============================================ */

.kt-flex {
  display: flex;
}

.kt-gap-4 { gap: var(--kt-space-4); }
.kt-gap-6 { gap: var(--kt-space-6); }
.kt-gap-8 { gap: var(--kt-space-8); }
.kt-gap-10 { gap: var(--kt-space-10); }
.kt-gap-12 { gap: var(--kt-space-12); }
.kt-gap-16 { gap: var(--kt-space-16); }
.kt-gap-20 { gap: var(--kt-space-20); }

/* Continue in next file... */