/* ============================================
   GLOBAL VARIABLES - Change colors here to update the entire site
   Based on: Infinite Epigenetics Design System
   ============================================ */

:root {
    /* ─── Primary Colors ─── */
    --primary-color:          #0C2E35;      /* Deep teal - nav, headers, dark sections */
    --secondary-color:        #E9FE53;      /* Bright lime - accents, buttons, highlights */
    --bg-color:               #FEF9EF;      /* Warm cream - page background */
    --text-color:             #15190D;      /* Near-black - body text */
    --accent-color:           #E9FE53;      /* Lime yellow - same as secondary */
    --accent-pink:            #E24EC7;      /* Magenta - special highlights */

    /* ─── Neutral Colors ─── */
    --white-color:            #FFFFFF;
    --light-gray:             #F5F5F5;
    --medium-gray:            #A69D94;      /* Warm gray - muted text */
    --dark-gray:              #45566A;
    --black-color:            #000000;

    /* ─── Utility Colors ─── */
    --divider-color:          rgba(12, 46, 53, 0.1);
    --dark-divider-color:     rgba(255, 255, 255, 0.1);
    --error-color:            #982133;
    --success-color:          #198754;
    --warning-color:          #ffc107;
    --info-color:             #0dcaf0;

    /* ─── Section Backgrounds ─── */
    --section-dark-bg:        #0C2E35;      /* Dark sections */
    --section-light-bg:       #FEF9EF;      /* Light sections */
    --section-alt-bg:         #F0EDE6;      /* Alternate light sections */

    /* ─── Typography ─── */
    --default-font:           "Inter", sans-serif;
    --accent-font:            "Inter", sans-serif;
    --font-size-base:         16px;
    --font-weight-light:      300;
    --font-weight-normal:     400;
    --font-weight-medium:     500;
    --font-weight-semibold:   600;
    --font-weight-bold:       700;

    /* ─── Spacing ─── */
    --section-padding:        100px;
    --container-padding:      15px;

    /* ─── Borders & Radius ─── */
    --border-radius-sm:       8px;
    --border-radius-md:       16px;
    --border-radius-lg:       24px;
    --border-radius-pill:     100px;        /* Pill-shaped buttons */
    --border-color:           rgba(12, 46, 53, 0.15);

    /* ─── Shadows ─── */
    --shadow-sm:              0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:              0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg:              0 8px 32px rgba(0, 0, 0, 0.16);

    /* ─── Transitions ─── */
    --transition-fast:        0.2s ease;
    --transition-normal:      0.3s ease;
    --transition-slow:        0.4s ease;
}