/* ============================================
   EpiphanyMade — Brand Design Tokens
   Single source of truth for all visual properties.
   Import this in every page/component.
   ============================================ */

:root {
  /* ---- COLOR: Primary ---- */
  --color-navy:          #0A2A3C;   /* hero bg, dark sections */
  --color-navy-deep:     #071E2B;   /* footer, deepest bg */
  --color-navy-light:    #0F172A;   /* headings on white */

  /* ---- COLOR: Accent ---- */
  --color-teal:          #0891B2;   /* links, accent text, stats */
  --color-teal-light:    #06B6D4;   /* hover states */
  --color-teal-muted:    #0E7490;   /* pressed / active */
  --color-teal-bg:       #ECFEFF;   /* light teal background */
  --color-teal-bg-soft:  #CFFAFE;   /* icon card gradient end */

  /* ---- COLOR: CTA ---- */
  --color-lime:          #84CC16;   /* primary buttons, CTA */
  --color-lime-hover:    #9AE62B;   /* button hover */
  --color-lime-text:     #062E1A;   /* dark text on lime */

  /* ---- COLOR: Neutrals (Slate) ---- */
  --color-heading:       #0F172A;   /* h1-h3 on white bg */
  --color-body:          #1E293B;   /* body text */
  --color-secondary:     #475569;   /* secondary body text */
  --color-muted:         #64748B;   /* captions, metadata */
  --color-faint:         #94A3B8;   /* labels, placeholders */
  --color-border:        #E2E8F0;   /* card borders, dividers */
  --color-bg-alt:        #F8FAFB;   /* alternating section bg */
  --color-bg:            #FFFFFF;   /* primary bg */

  /* ---- COLOR: Semantic ---- */
  --color-success:       #16A34A;
  --color-warning:       #D97706;
  --color-error:         #DC2626;
  --color-info:          #0891B2;

  /* ---- COLOR: Hero-specific ---- */
  --hero-bg:             #0B1E2E;
  --hero-text:           #FFFFFF;
  --hero-subtitle:       rgba(255, 255, 255, 0.8);
  --hero-nav-link:       rgba(255, 255, 255, 0.55);
  --hero-ghost-bg:       rgba(255, 255, 255, 0.06);
  --hero-ghost-border:   rgba(255, 255, 255, 0.12);

  /* ---- TYPOGRAPHY ---- */
  --font-heading:        'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:           'Inter', system-ui, -apple-system, sans-serif;

  /* ---- TYPE SCALE (Desktop) ---- */
  --text-h1:             60px;
  --text-h2:             36px;
  --text-h3:             24px;
  --text-body:           16px;
  --text-body-lg:        19px;  /* hero subtitle, section subtitles */
  --text-small:          14px;
  --text-xs:             13px;
  --text-button:         15px;

  /* ---- TYPE SCALE (Mobile — use via media query) ---- */
  --text-h1-mobile:      36px;
  --text-h2-mobile:      28px;
  --text-h3-mobile:      20px;

  /* ---- FONT WEIGHTS ---- */
  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* ---- LINE HEIGHT ---- */
  --leading-heading:     1.08;
  --leading-body:        1.65;
  --leading-tight:       1.25;
  --leading-relaxed:     1.7;

  /* ---- LETTER SPACING ---- */
  --tracking-h1:         -2px;
  --tracking-h2:         -0.5px;
  --tracking-tight:      -0.3px;
  --tracking-button:     -0.2px;

  /* ---- SPACING ---- */
  --space-unit:          4px;
  --space-xs:            8px;    /* 2 units */
  --space-sm:            16px;   /* 4 units */
  --space-md:            24px;   /* 6 units */
  --space-lg:            36px;   /* 9 units */
  --space-xl:            48px;   /* 12 units */
  --space-2xl:           64px;   /* 16 units */
  --space-3xl:           80px;   /* 20 units */
  --space-section:       80px;   /* section padding */
  --space-section-x:     48px;   /* horizontal page padding */

  /* ---- RADIUS ---- */
  --radius-sm:           6px;    /* nav CTA, small elements */
  --radius-md:           8px;    /* buttons, inputs */
  --radius-lg:           12px;   /* cards */
  --radius-xl:           14px;   /* modals, panels */

  /* ---- SHADOWS ---- */
  --shadow-card:         0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover:   0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-dropdown:     0 4px 16px rgba(0, 0, 0, 0.08);

  /* ---- TRANSITIONS ---- */
  --ease-default:        0.2s ease;
  --ease-bounce:         0.15s ease;

  /* ---- AURORA ANIMATION ---- */
  --aurora-speed-1:      20s;
  --aurora-speed-2:      26s;
  --aurora-speed-3:      18s;
  --aurora-blur:         60px;

  /* ---- Extended Gradients ---- */
  --gradient-navy-down: linear-gradient(180deg, #0A2A3C 0%, #071E2B 100%);
  --gradient-dark-section: linear-gradient(180deg, #0A2A3C 0%, #0C3048 50%, #0A2A3C 100%);
  --gradient-teal-accent: linear-gradient(135deg, rgba(8,145,178,0.08) 0%, rgba(132,204,22,0.04) 100%);
  --gradient-card-border: linear-gradient(135deg, #0891B2 0%, #84CC16 100%);
  --gradient-intake: linear-gradient(180deg, #F0FDFA 0%, #FFFFFF 100%);

  /* ---- Section Backgrounds ---- */
  --bg-section-dark: #0A2A3C;
  --bg-section-darker: #071E2B;
  --bg-section-teal: #F0FDFA;
  --bg-section-light: #F8FAFB;
  --bg-section-alt: #FFFFFF;

  /* ---- Glow Shadows ---- */
  --glow-teal-sm: 0 0 20px rgba(8, 145, 178, 0.15);
  --glow-teal-md: 0 0 40px rgba(8, 145, 178, 0.2);
  --glow-teal-lg: 0 4px 60px rgba(8, 145, 178, 0.25);
  --glow-lime-sm: 0 0 20px rgba(132, 204, 22, 0.15);
  --glow-lime-md: 0 0 40px rgba(132, 204, 22, 0.2);
  --shadow-card-glow: 0 8px 30px rgba(0,0,0,0.06), 0 0 20px rgba(8,145,178,0.08);
  --shadow-card-strong: 0 12px 40px rgba(0,0,0,0.15);

  /* ---- Animation Timing ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast: 0.2s;
  --duration-med: 0.4s;
  --duration-slow: 0.6s;

  /* ---- Extended Colors ---- */
  --color-navy-80: #0E3A52;
  --color-teal-glow: rgba(8, 145, 178, 0.15);
  --color-teal-bg: #ECFEFF;
  --color-lime-text: #062E1A;
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-05: rgba(255, 255, 255, 0.05);
}

/* ---- MOBILE OVERRIDES ---- */
@media (max-width: 768px) {
  :root {
    --text-h1:           36px;
    --text-h2:           28px;
    --text-h3:           20px;
    --text-body-lg:      17px;
    --space-section:     56px;
    --space-section-x:   24px;
  }
}