:root {
    color: var(--g7);
    /* Colors */
    /* Primaries */
    --p1: #ffb55e;  /* Brightest - hero orange */
    /* Brightest - vibrant hero sections */
    --p2: #ff9345;  /* CTA buttons - energetic, warm */
    /* Bright - main buttons, prominent CTA */
    --p3: #ff7a2b;  /* Default primary - balanced orange */
    /* Medium - default primary, standard sections */
    --p5: #e95b18;  /* Darker orange - strong areas, pricing cards */
    /* Darkest - deep sections, pricing cards */
    /* Greys */
    --g1: #ffffff;
    /* Pure white background */
    --g2: #f5f5f5;
    /* Light grey surface */
    --g3: #e5e7eb;
    /* Borders, light dividers */
    --g4: #9ca3af;
    /* Medium grey, secondary text */
    --g5: #616161;
    /* Dark grey, body text */
    --g6: #373748;
    /* Very dark, headings */
    --g7: #111616;
    /* Darkest grey - footer background */
    /* Accents */
    --a1: #ff5722;  /* Deep red-orange - primary accent */
    /* Hot pink - solid buttons, main CTAs, badges */
    --a2: #e64a19;  /* Darker active hover accent */
    /* Dark pink - hover/active states, emphasis */
    --s: #10b981;
    /* Green - success states, confirmations */
    --e: #ef4444;
    /* Red - errors, alerts */
    /* Opacity */
    --o0: 0;
    /* No opacity */
    --o1: 0.1;
    /* Very subtle - backgrounds, overlays */
    --o2: 0.2;
    /* Subtle - hover states, light overlays */
    --o3: 0.4;
    /* Medium - interactive states */
    --o4: 0.6;
    /* Strong - prominent overlays */
    --o6: 0.8;
    /* Very strong - high contrast overlays */
    --o7: 1;
    /* Full opacity */
    /* Focus shadows */
    --f: 0 0 12px rgba(255, 42, 110, var(--o6));
    --wf: 0 0 12px rgba(255, 255, 255, var(--o6));
}

:root,
button,
input {
    font-family: "Avenir", "SF Pro Text", "Segoe UI", "Noto Sans", Helvetica, Arial, system-ui, sans-serif;
    letter-spacing: 0.8px;
    font-size: 12px;
}

h1 {
    font-size: 48px;
    font-weight: 900;
}

h2 {
    font-size: 30px;
    font-weight: 900;
}