/* ──────────────────────────────────────────────
   Design System — CSS Custom Properties
   ────────────────────────────────────────────── */


:root {
    /* ── Colors ── */
    --color-deep-sea:       #0D4F4E;
    --color-dark-turquoise: #00CED1;
    --color-neon-turquoise: #48F4F0;
    --color-aquamarine:     #7FFFD4;
    --color-dark-green:     #305B51;
    --color-dark-green-alt: #2F5B50;

    --color-black:          #000000;
    --color-text-primary:   #1C1E1E;
    --color-text-dark:      #191A15;
    --color-white:          #FFFFFF;

    --color-bg-page:        #FAFAFA;
    --color-bg-card:        #F4F4F4;
    --color-bg-mint:        #D2E0DA;
    --color-bg-form:        #EDF3F0;
    --color-bg-button-form: #D1E1DA;
    --color-text-muted:     #8F8F8F;
    --color-border:         #D2D2D2;
    --color-border-footer:  rgba(255, 255, 255, 0.08);

    --gradient-primary:     linear-gradient(90deg, #0D4F4E 0%, #00CED1 100%);
    --gradient-vertical:    linear-gradient(180deg, #0D4F4E 0%, #00CED1 100%);
    --gradient-diagonal:    linear-gradient(141deg, #0D4F4E 0%, #00CED1 100%);
    --gradient-fade-down:   linear-gradient(180deg, #FAFAFA 0%, rgba(250, 250, 250, 0) 99%);
    --gradient-progress:    linear-gradient(90deg, #00CED1 32%, #48F4F0 100%);

    --color-bg-dark:        #1C1E1E;
    --color-bg-card-alt:    #E8E8E8;
    --color-bg-monitor:     #132623;
    --color-bg-metric-card: #263E38;

    /* Monitor advantages card colors */
    --color-monitor-card-1: #96E8EA;
    --color-monitor-card-2: #E1FBF2;
    --color-monitor-card-3: #C8F1F2;

    /* ── Typography ── */
    --font-heading: 'Inter', sans-serif;
    --font-body:    'Inter', sans-serif;

    --fs-h1:        80px;
    --fs-h2:        60px;
    --fs-h3:        32px;
    --fs-body-lg:   20px;
    --fs-body:      16px;
    --fs-button:    18px;
    --fs-nav:       16px;
    --fs-small:     14px;
    --fs-xs:        12px;
    --fs-h2-sm:     40px;
    --fs-h3-sm:     24px;

    --lh-h1:        1.125;
    --lh-h2:        1.167;
    --lh-h3:        1.188;
    --lh-body-lg:   1.3;
    --lh-body:      1.21;
    --lh-button:    1.444;
    --lh-nav:       1.5;

    --fw-extrabold: 800;
    --fw-bold:      700;
    --fw-semibold:  600;
    --fw-medium:    500;
    --fw-regular:   400;

    /* ── Spacing ── */
    --section-padding-x:      50px;
    --section-padding-y:      80px;
    --container-max-width:    1340px;
    --header-height:          64px;

    /* ── Border Radius ── */
    --radius-pill:   9999px;
    --radius-card:   18px;
    --radius-small:  8px;

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