/* ================================================================
   ROOFINGFOX — DESIGN TOKENS
   Linear/Cinematic Dark UI System
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Core Dark Palette ── */
  --bg-base:        #050506;
  --bg-elevated:    #0A0A0F;
  --bg-surface:     #0F0F18;
  --bg-surface-2:   #14141F;
  --bg-surface-3:   #1A1A28;
  --bg-overlay:     #1F1F30;

  /* ── Border System ── */
  --border-subtle:  rgba(255,255,255,0.04);
  --border-default: rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);
  --border-accent:  rgba(94,106,210,0.35);

  /* ── Indigo Accent Scale ── */
  --indigo-50:  #EEEFFE;
  --indigo-100: #D9DCFD;
  --indigo-200: #B3B9FA;
  --indigo-300: #8D96F8;
  --indigo-400: #6773F5;
  --indigo-500: #5E6AD2;   /* primary */
  --indigo-600: #4B56C0;
  --indigo-700: #3842AE;
  --indigo-800: #252E9C;
  --indigo-900: #121A8A;

  /* ── Semantic Accent ── */
  --accent:         var(--indigo-500);
  --accent-light:   var(--indigo-400);
  --accent-lighter: var(--indigo-300);
  --accent-dim:     rgba(94,106,210,0.15);
  --accent-glow:    rgba(94,106,210,0.25);
  --accent-glow-lg: rgba(94,106,210,0.12);

  /* ── Text Scale ── */
  --text-primary:   rgba(255,255,255,0.95);
  --text-secondary: rgba(255,255,255,0.60);
  --text-tertiary:  rgba(255,255,255,0.35);
  --text-muted:     rgba(255,255,255,0.20);
  --text-accent:    var(--indigo-400);

  /* ── Gradient Library ── */
  --grad-accent:     linear-gradient(135deg, #5E6AD2 0%, #7C3AED 100%);
  --grad-accent-h:   linear-gradient(135deg, #6773F5 0%, #8B5CF6 100%);
  --grad-surface:    linear-gradient(180deg, #0F0F18 0%, #050506 100%);
  --grad-glow-top:   radial-gradient(ellipse 80% 50% at 50% -20%, rgba(94,106,210,0.18) 0%, transparent 70%);
  --grad-glow-hero:  radial-gradient(ellipse 100% 80% at 50% 0%, rgba(94,106,210,0.22) 0%, transparent 60%);
  --grad-card:       linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --grad-shine:      linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.05) 50%, transparent 60%);
  --grad-text:       linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);

  /* ── Shadow System ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-xl:   0 16px 64px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 24px rgba(94,106,210,0.4), 0 0 8px rgba(94,106,210,0.2);
  --shadow-glow-sm: 0 0 12px rgba(94,106,210,0.3);
  --shadow-card: 0 1px 1px rgba(0,0,0,0.5), 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);

  /* ── Blur / Glass ── */
  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(24px);
  --blur-xl:  blur(40px);

  /* ── Typography ── */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Type scale */
  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  2rem;
  --t-3xl:  2.75rem;
  --t-4xl:  3.75rem;
  --t-5xl:  5rem;
  --t-6xl:  6.5rem;
  --t-7xl:  8.5rem;

  /* ── Spacing ── */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  20px;  --s-6:  24px;  --s-8:  32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;  --s-24: 96px;
  --s-32: 128px;

  /* ── Shape ── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ── Layout ── */
  --max-w:        1280px;
  --max-w-narrow: 840px;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-io:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    100ms;
  --dur-mid:     200ms;
  --dur-slow:    350ms;
  --dur-xslow:   550ms;
}