/* ================================================================
   ShaDey Inc. Design Tokens  —  Data Platform
   Ultra-Modern Sophisticated Edition
   Single source of truth for colors, typography, spacing, shadows.
   ================================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Core Palette (Ultra Modern — Sophisticated Dark Luxury) ---------- */
:root {
  /* Backgrounds */
  --color-bg:             #fafafa;
  --color-bg-card:        #ffffff;
  --color-bg-card-hover:  #ffffff;
  --color-bg-muted:       #f5f5f5;

  /* Surface System */
  --color-surface:        #fafafa;
  --color-surface-dim:    #e8e8e8;
  --color-surface-container:        #f0f0f0;
  --color-surface-container-low:    #f5f5f5;
  --color-surface-container-high:   #e8e8e8;
  --color-surface-container-highest:#e0e0e0;
  --color-surface-container-lowest: #ffffff;

  /* Text */
  --color-text:           #0a0a0a;
  --color-text-secondary: #3d3d3d;
  --color-text-muted:     #6b6b6b;

  /* Borders */
  --color-border:         #e5e5e5;
  --color-border-hover:   #d0d0d0;
  --color-outline:        #a0a0a0;
  --color-outline-variant:#d0d0d0;

  /* Brand Primary (Deep Black) */
  --color-primary:        #0a0a0a;
  --color-on-primary:     #ffffff;
  --color-primary-container:  #1a1a1a;
  --color-on-primary-container: #8a8a8a;
  --color-primary-fixed:      #e5e5e5;
  --color-primary-fixed-dim:  #c8c8c8;

  /* Brand Secondary (Rich Warm Brown / Bronze) */
  --color-secondary:      #8B6914;
  --color-on-secondary:   #ffffff;
  --color-secondary-container: #f5e6b8;
  --color-on-secondary-container: #6b5010;
  --color-secondary-fixed:     #ffeaa7;
  --color-secondary-fixed-dim: #d4b85a;

  /* Brand Accent */
  --color-accent:         #8B6914;
  --color-accent-light:   #f5e6b8;
  --color-accent-dark:    #5a4410;
  --color-accent-glow:    rgba(139,105,20,0.15);

  /* Tertiary */
  --color-tertiary:       #0a0a0a;
  --color-tertiary-container: #1a1a0a;
  --color-tertiary-fixed:     #f0e0ca;
  --color-tertiary-fixed-dim: #d3c4af;

  /* Semantic: Green */
  --color-green:          #10B981;
  --color-green-bg:       #ECFDF5;
  --color-green-border:   #A7F3D0;
  --color-green-dark:     #065F46;

  /* Semantic: Amber */
  --color-amber:          #F59E0B;
  --color-amber-bg:       #FFFBEB;
  --color-amber-border:   #FDE68A;
  --color-amber-dark:     #92400E;

  /* Semantic: Red */
  --color-red:            #EF4444;
  --color-red-bg:         #FEF2F2;
  --color-red-border:     #FECACA;
  --color-red-dark:       #991B1B;

  /* Semantic: Blue */
  --color-blue:           #3B82F6;
  --color-blue-bg:        #EFF6FF;
  --color-blue-border:    #BFDBFE;
  --color-blue-dark:      #1E40AF;

  /* Semantic: Purple */
  --color-purple:         #8B5CF6;
  --color-purple-bg:      #F5F3FF;
  --color-purple-border:  #DDD6FE;
  --color-purple-dark:    #5B21B6;

  /* Semantic: Indigo */
  --color-indigo:         #6366F1;
  --color-indigo-bg:      #EEF2FF;
  --color-indigo-border:  #C7D2FE;
  --color-indigo-dark:    #3730A3;

  /* Semantic: Teal */
  --color-teal:           #14B8A6;
  --color-teal-bg:        #F0FDFA;
  --color-teal-border:    #99F6E4;
  --color-teal-dark:      #115E59;

  /* Semantic: Pink */
  --color-pink:           #EC4899;
  --color-pink-bg:        #FDF2F8;
  --color-pink-border:    #FBCFE8;
  --color-pink-dark:      #9D174D;

  /* Semantic: Rose */
  --color-rose:           #F43F5E;
  --color-rose-bg:        #FFF1F2;
  --color-rose-border:    #FECDD3;
  --color-rose-dark:      #9F1239;

  /* Neutral */
  --color-slate:          #6b6b6b;

  /* Inverse */
  --color-inverse-surface:    #1a1a1a;
  --color-inverse-on-surface: #f5f5f5;
  --color-inverse-primary:    #d4b85a;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 40%, #16213e 70%, #0f3460 100%);
  --gradient-accent: linear-gradient(135deg, #8B6914 0%, #d4a017 50%, #b8860b 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(139,105,20,0.03) 0%, rgba(139,105,20,0) 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(250,250,250,0.6) 100%);
  --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
  --gradient-mesh: radial-gradient(at 20% 80%, rgba(139,105,20,0.08) 0%, transparent 50%),
                   radial-gradient(at 80% 20%, rgba(59,130,246,0.05) 0%, transparent 50%),
                   radial-gradient(at 50% 50%, rgba(139,69,19,0.03) 0%, transparent 70%);

  /* Shadows — Elevated, sophisticated */
  --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-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 50px -12px rgba(0,0,0,0.12), 0 8px 20px -8px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 0 3px var(--color-accent-glow);
  --shadow-card-hover: 0 20px 40px -12px rgba(0,0,0,0.1), 0 0 0 1px rgba(139,105,20,0.08);
  --shadow-float: 0 30px 60px -20px rgba(0,0,0,0.15);

  /* Border Radius — Refined, modern */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Transitions — Smooth, premium */
  --ease-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-med:  0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-headline: 'Noto Serif', 'Georgia', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;

  /* Letter Spacing */
  --ls-luxury: 0.01em;
  --ls-label:  0.06em;
  --ls-tight:  -0.02em;
  --ls-display: -0.03em;

  /* Sizing */
  --nav-h:  72px;
  --max-w:  1320px;
}

/* ---------- Base Typography ---------- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  letter-spacing: var(--ls-luxury);
}
h1, h2, h3 {
  font-family: var(--font-headline);
}

/* ---------- Utility: Luxury Label ---------- */
.label-luxury {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
}

/* ---------- Scroll Reveal Animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Animated Counter ---------- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Subtle Float ---------- */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------- Shimmer ---------- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---------- Gradient Shift ---------- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Pulse Glow ---------- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,105,20,0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(139,105,20,0); }
}

/* ---------- Backward-Compatibility Aliases ---------- */
:root {
  /* Background */
  --bg: var(--color-bg);
  --bg-card: var(--color-bg-card);
  --bg-card-hover: var(--color-bg-card-hover);

  /* Text */
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text: var(--color-text);
  --text-2: var(--color-text-secondary);
  --text-3: var(--color-text-muted);

  /* Border */
  --border: var(--color-border);
  --border-hover: var(--color-border-hover);

  /* Accent */
  --accent: var(--color-accent);
  --accent-light: var(--color-accent-light);
  --accent-glow: var(--color-accent-glow);
  --accent-dark: var(--color-accent-dark);
  --accent-bg: var(--color-accent-light);
  --accent-border: var(--color-secondary-fixed-dim);

  /* Semantic short names */
  --green: var(--color-green);
  --green-bg: var(--color-green-bg);
  --green-border: var(--color-green-border);
  --green-dark: var(--color-green-dark);

  --amber: var(--color-amber);
  --amber-bg: var(--color-amber-bg);
  --amber-border: var(--color-amber-border);
  --amber-dark: var(--color-amber-dark);

  --red: var(--color-red);
  --red-bg: var(--color-red-bg);
  --red-border: var(--color-red-border);
  --red-dark: var(--color-red-dark);

  --blue: var(--color-blue);
  --blue-bg: var(--color-blue-bg);
  --blue-border: var(--color-blue-border);
  --blue-dark: var(--color-blue-dark);

  --purple: var(--color-purple);
  --purple-bg: var(--color-purple-bg);
  --purple-border: var(--color-purple-border);
  --purple-dark: var(--color-purple-dark);

  --indigo: var(--color-indigo);
  --indigo-bg: var(--color-indigo-bg);
  --indigo-border: var(--color-indigo-border);
  --indigo-dark: var(--color-indigo-dark);

  --teal: var(--color-teal);
  --teal-bg: var(--color-teal-bg);
  --teal-border: var(--color-teal-border);
  --teal-dark: var(--color-teal-dark);

  --pink: var(--color-pink);
  --pink-bg: var(--color-pink-bg);
  --pink-border: var(--color-pink-border);
  --pink-dark: var(--color-pink-dark);

  --rose: var(--color-rose);
  --rose-bg: var(--color-rose-bg);
  --rose-border: var(--color-rose-border);
  --rose-dark: var(--color-rose-dark);

  --slate: var(--color-slate);

  /* Radius aliases */
  --r: var(--radius-md);
  --r-sm: var(--radius-sm);
  --r-xs: var(--radius-xs);
  --radius: var(--radius-md);

  /* Transition aliases */
  --transition: var(--ease-med);
  --ease: var(--ease-med);
  --transition-fast: var(--ease-fast);
  --transition-med: var(--ease-med);
  --transition-slow: var(--ease-slow);

  /* Font aliases */
  --mono: var(--font-mono);

  /* Sizing aliases */
  --header-h: 72px;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}