@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Core Palette: White / Grey / Black / Orange ── */
  --color-white:          #FFFFFF;
  --color-bg-base:        #F5F5F5;
  --color-bg-elevated:    #FFFFFF;
  --color-bg-surface:     #FFFFFF;
  --color-bg-subtle:      #F0F0F0;
  --color-bg-muted:       #E8E8E8;

  --color-black:          #0A0A0A;
  --color-ink:            #111111;
  --color-ink-mid:        #333333;
  --color-ink-light:      #555555;

  --color-grey-100:       #F5F5F5;
  --color-grey-200:       #E8E8E8;
  --color-grey-300:       #D4D4D4;
  --color-grey-400:       #A3A3A3;
  --color-grey-500:       #737373;
  --color-grey-600:       #525252;
  --color-grey-700:       #404040;
  --color-grey-800:       #262626;
  --color-grey-900:       #171717;

  --color-accent:         #FF6B2B;
  --color-accent-bright:  #FF8347;
  --color-accent-dim:     #E05520;
  --color-accent-glow:    rgba(255,107,43,0.2);
  --color-accent-subtle:  rgba(255,107,43,0.07);
  --color-accent-light:   rgba(255,107,43,0.1);

  --color-text-primary:   var(--color-ink);
  --color-text-secondary: var(--color-grey-600);
  --color-text-muted:     var(--color-grey-400);
  --color-text-accent:    var(--color-accent);

  --color-border:         var(--color-grey-200);
  --color-border-mid:     var(--color-grey-300);
  --color-border-dark:    var(--color-grey-800);
  --color-border-accent:  rgba(255,107,43,0.3);

  --color-compliance-bg:     rgba(255,107,43,0.05);
  --color-compliance-border: rgba(255,107,43,0.2);

  /* ── Dark Section (footer, CTA blocks) ── */
  --color-dark-bg:        #0A0A0A;
  --color-dark-surface:   #141414;
  --color-dark-border:    rgba(255,255,255,0.08);
  --color-dark-text:      rgba(255,255,255,0.9);
  --color-dark-muted:     rgba(255,255,255,0.4);

  /* ── Gradients ── */
  --grad-accent:        linear-gradient(135deg, #FF6B2B 0%, #FF9A5C 100%);
  --grad-accent-v:      linear-gradient(180deg, #FF6B2B 0%, #E05520 100%);
  --grad-hero-overlay:  linear-gradient(90deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.3) 60%, rgba(10,10,10,0) 100%);
  --grad-dark:          linear-gradient(135deg, #0A0A0A 0%, #1a1a1a 100%);
  --grad-text-accent:   linear-gradient(135deg, #FF8347 0%, #FF6B2B 60%, #E05520 100%);
  --grad-surface:       linear-gradient(135deg, rgba(255,107,43,0.04) 0%, transparent 50%);

  /* ── Glass (for nav) ── */
  --glass-bg:      rgba(255,255,255,0.88);
  --glass-blur:    blur(20px) saturate(180%);
  --glass-border:  1px solid rgba(0,0,0,0.07);
  --glass-shadow:  0 1px 0 rgba(0,0,0,0.06), 0 4px 24px rgba(0,0,0,0.06);

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem;
  --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; --text-8xl: 6rem;

  --weight-light: 300; --weight-regular: 400; --weight-medium: 500;
  --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900;

  --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5;
  --leading-relaxed: 1.625; --leading-loose: 1.75;

  --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em;
  --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em;

  /* ── Spacing ── */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem;
  --space-10:2.5rem; --space-12:3rem; --space-14:3.5rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* ── Radius ── */
  --radius-sm:0.25rem; --radius-md:0.375rem; --radius-lg:0.5rem; --radius-xl:0.75rem;
  --radius-2xl:1rem; --radius-3xl:1.5rem; --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.1),  0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 30px rgba(255,107,43,0.25), 0 0 60px rgba(255,107,43,0.1);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-base:   250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   400ms cubic-bezier(0.4,0,0.2,1);
  --transition-bounce: 300ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── Layout ── */
  --container-max: 1280px;
  --container-narrow: 860px;
  --nav-height: 68px;
  --section-pad-y: 6rem;
}