/* ============================================
   EPIVANTAGE — DESIGN TOKENS
   Single source of truth. Change here = changes everywhere.
   ============================================ */

:root {

  /* ==========================================
     COLORS
     ========================================== */

  /* Primary */
  --color-primary:        #C00000;          /* Main red — CTAs, accents, links */
  --color-primary-dark:   #9A0000;          /* Hover / pressed state */
  --color-primary-light:  hsla(0,100%,75%,0.15); /* Tinted backgrounds */
  --color-primary-rgb:    192, 0, 0;        /* For rgba() usage */

  /* Neutrals */
  --color-black:          #000000;          /* Headlines, strong text */
  --color-body:           #1A1A1A;          /* Body text */
  --color-muted:          #595959;          /* Captions, labels, placeholders */
  --color-border:         #E5E7EB;          /* Dividers, outlines */
  --color-white:          #FFFFFF;
  --color-off-white:      #F9FAFB;
  --color-bg-light:       #F3F4F6;

  /* Accent — Blue */
  --color-blue:           #0060F1;          /* Info, links, tags */
  --color-blue-light:     #EBF3FF;          /* Blue tinted backgrounds */
  --color-blue-dark:      #0047B8;          /* Blue hover */

  /* Accent — Yellow / Warning */
  --color-yellow:         #EAA41D;          /* Alerts, badges, warnings */
  --color-yellow-light:   #FEF6E4;          /* Yellow tinted backgrounds */
  --color-yellow-dark:    #C47F00;          /* Yellow hover */

  /* Semantic */
  --color-success:        #16A34A;
  --color-success-light:  #DCFCE7;
  --color-error:          #DC2626;
  --color-error-light:    #FEE2E2;

  /* ==========================================
     TYPOGRAPHY
     ========================================== */

  --font-heading: 'Manrope', sans-serif;    /* All headings H1–H6 */
  --font-body:    'Source Sans 3', sans-serif; /* All body, UI, labels */
  --font-mono:    'JetBrains Mono', monospace; /* Numbers, stats, code */

  /* Type Scale */
  --text-xs:    0.75rem;    /* 12px — labels, badges */
  --text-sm:    0.875rem;   /* 14px — captions, nav */
  --text-base:  1rem;       /* 16px — body default */
  --text-md:    1.125rem;   /* 18px — lead text */
  --text-lg:    1.25rem;    /* 20px — card titles */
  --text-xl:    1.5rem;     /* 24px — section subtitles */
  --text-2xl:   2rem;       /* 32px — H3 */
  --text-3xl:   2.5rem;     /* 40px — H2 */
  --text-4xl:   3rem;       /* 48px — H1 desktop */
  --text-5xl:   3.75rem;    /* 60px — Hero */

  /* Font Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line Heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* Letter Spacing */
  --ls-tight:   -0.03em;
  --ls-normal:  0em;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;

  /* ==========================================
     SPACING
     ========================================== */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Section Padding */
  --section-py:    var(--space-24);   /* Default section top/bottom */
  --section-py-sm: var(--space-16);
  --section-py-lg: var(--space-32);

  /* ==========================================
     LAYOUT
     ========================================== */

  --container-max:    1180px;
  --container-wide:   1440px;
  --container-narrow: 860px;
  --container-px:     var(--space-6); /* Horizontal padding */

  /* Grid */
  --grid-gap:    var(--space-6);
  --grid-gap-lg: var(--space-8);

  /* ==========================================
     BORDER RADIUS
     ========================================== */

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ==========================================
     SHADOWS
     ========================================== */

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.16);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.07);

  /* ==========================================
     TRANSITIONS
     ========================================== */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34,1.56,0.64,1);

  /* ==========================================
     Z-INDEX
     ========================================== */

  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-sticky:  150;
  --z-modal:   200;
  --z-toast:   300;

  /* ==========================================
     NAV
     ========================================== */

  --nav-height:        72px;
  --nav-bg:            var(--color-white);
  --nav-border:        var(--color-border);
  --nav-link-color:    var(--color-body);
  --nav-link-hover:    var(--color-primary);

  /* ==========================================
     COMPONENTS — quick override points
     ========================================== */

  /* Buttons */
  --btn-radius:        var(--radius-sm);
  --btn-font-size:     var(--text-sm);
  --btn-font-weight:   var(--fw-semibold);
  --btn-py:            0.75rem;
  --btn-px:            1.5rem;

  /* Cards */
  --card-radius:       var(--radius-lg);
  --card-border:       var(--color-border);
  --card-shadow:       var(--shadow-card);
  --card-bg:           var(--color-white);
  --card-p:            var(--space-6);

  /* Badges */
  --badge-radius:      var(--radius-full);
  --badge-font-size:   var(--text-xs);
  --badge-font-weight: var(--fw-semibold);
  --badge-py:          0.2rem;
  --badge-px:          0.6rem;

  /* Forms */
  --input-radius:      var(--radius-md);
  --input-border:      var(--color-border);
  --input-focus:       var(--color-blue);
  --input-bg:          var(--color-white);
  --input-py:          0.75rem;
  --input-px:          1rem;
  --input-font-size:   var(--text-base);

}