/* ============================================
   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:             #0A2A3C;
  --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;
}

/* ---- 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;
  }
}