/* 
* File: rise-variables.css
* Layer: Rise (Brand Variables)
* Client: OIC of South Florida
*/

html {
    font-size: 87.5% !important;
    /* 14px, based on 16px universal browser root */
}

:root {
    /* - 1.0  COLORS - */

    /* -- 1.1  Brand Colors -- */
    --marinaBay: #0064db;
    --marinaBay80: #3383e3;
    --marinaBay60: #66a2ea;
    --marinaBay40: #99c1f1;
    --marinaBay20: #cce0f8;
    --marinaBay10: #e5effb;
    --marinaBay-shade1: #00429d;
    --marinaBay-shade2: #16367c;
    --marinaBay-shade3: #00205f;
    --marinaBay-opaque60: rgba(0, 100, 220, 0.6);

    /* -- 1.2  Program Colors -- */

    /* --- 1.2.1  Workforce Development (Key Lime) Strong Green --- */
    --keyLime: #5fc800;
    --keyLime80: #7fd333;
    --keyLime60: #9fde66;
    --keyLime40: #bfe999;
    --keyLime20: #dff4cc;
    --keyLime10: #eff9e5;
    --keyLime-shade1: #55a007;
    --keyLime-shade2: #37890b;

    /* --- 1.2.2  Youth & Family Services (Sea Star) Yellow Orange --- */
    --seaStar: #ffaf00;
    --seaStar80: #ffbf33;
    --seaStar60: #ffcf66;
    --seaStar40: #ffdf99;
    --seaStar20: #ffefcc;
    --seaStar10: #fff7e5;
    --seaStar-shade1: #f49519;
    --seaStar-shade2: #e08312;

    /* --- 1.2.3  Training & Education (Key Largo) Strong Cyan --- */
    --keyLargo: #00c8be;
    --keyLargo80: #33d3cb;
    --keyLargo60: #66ded8;
    --keyLargo40: #99e9e5;
    --keyLargo20: #ccf4f2;
    --keyLargo10: #e5f9f8;
    --keyLargo-shade1: #00b2a5;
    --keyLargo-shade2: #007f7f;

    /* ---- 1.2.3.1  Training & Education (Key Largo Alternate) Bright Cyan ---- */
    --keyLargo-alt: #1ee5d1;
    --keyLargo-alt80: #4beada;
    --keyLargo-alt60: #78efe3;
    --keyLargo-alt40: #a5f5ed;
    --keyLargo-alt20: #d2faf6;
    --keyLargo-alt10: #e8fcfa;
    --keyLargo-shade1-alt: #00c8be;
    --keyLargo-shade2-alt: #02afa2;

    /* --- 1.2.4  Employment Services (Miami Berry) Dark Magenta --- */
    --miamiBerry: #af19aa;
    --miamiBerry80: #bf47bb;
    --miamiBerry60: #cf75cc;
    --miamiBerry40: #dfa3dd;
    --miamiBerry20: #efd1ee;
    --miamiBerry10: #f7e8f6;
    --miamiBerry-shade1: #8e138e;
    --miamiBerry-shade2: #6d0e70;

    /* --- 1.2.5  Social Enterprise (Royal Orchid) Strong Violet --- */
    --royalOrchid: #6415b7;
    --royalOrchid80: #8344c5;
    --royalOrchid60: #a273d4;
    --royalOrchid40: #c1a1e2;
    --royalOrchid20: #d9ccea;
    --royalOrchid10: #efe8f8;
    --royalOrchid-shade1: #6733ab;
    --royalOrchid-shade2: #410096;

    /* ---- 1.2.5.1  Social Enterprise Accent (Royal Orchid Accent) Light Blue Purple ---- */
    --royalOrchid-accent: #8db5ff;
    --royalOrchid-accent80: #a4c4ff;
    --royalOrchid-accent60: #bbd3ff;
    --royalOrchid-accent40: #d1e1ff;
    --royalOrchid-accent20: #e8f0ff;
    --royalOrchid-accent10: #f4f8ff;

    /* -- 1.3  Accent Colors -- */
    /* --- 1.3.1  Brand Accent (Blue Heron) Very Light Blue --- */
    --blueHeron: #93c5ff;
    --blueHeron80: #a9d1ff;
    --blueHeron60: #bedcff;
    --blueHeron40: #d4e8ff;
    --blueHeron20: #e9f3ff;
    --blueHeron10: #f4f9ff;

    /* --- 1.3.2  Global Accent (Living Coral) Dark Coral Pink --- */
    --livingCoral: #ff4057;
    --livingCoral80: #ff6679;
    --livingCoral60: #ff8c9a;
    --livingCoral-shade1: #d33752;
    --livingCoral-shade2: #a8142d;

    /* -- 1.4  Neutral Colors -- */
    /* --- 1.4.2  Neutral Grays & Whites (Dolphin Bay & Pure White) Blue Gray → White --- */
    --dolphinBay: #596e7d;
    /* base text color */
    --dolphinBay80: #7a8b97;
    --dolphinBay60: #9ba8b1;
    --dolphinBay40: #bdc5cb;
    --dolphinBay20: #dee2e5;
    --dolphinBay10: #eef0f2;
    --dolphinBay5: #f7f8f8;
    --pureWhite: #ffffff;

    /* --- 1.4.3  Neutral Blacks --- */
    --onyx: #111010;
    /* vision-friendly onscreen black */
    --richBlack: #0a2533;
    /* darker, alternate black */

    /* -- 1.5  UI Colors -- */
    /* --- 1.5.1  Base Body Colors --- */
    --fc-body: var(--dolphinbay);
    --fc-body-light: var(--purewhite);

    /* --- 1.5.2  Heading Colors --- */
    --fc-heading-primary: var(--marinabay);
    --fc-heading-light: var(--purewhite);
    --fc-heading-wd: var(--keylime);
    --fc-heading-yfs: var(--seastar);
    --fc-heading-te: var(--keylargo);
    --fc-heading-es: var(--miamiberry);
    --fc-heading-se: var(--royalorchid);
    --fc-heading-se2: var(--royalorchid-accent);

    --fc-link: var(--marinabay80);
    --fc-link-hover: var(--marinabay);
    --fc-link-active: var(--marinabay60);
    --fc-link-visited: var(--marinabay40);
    --fc-link-focus: var(--marinabay80);

    /* --- 1.5.3  Semantic Colors --- */
    --fc-success: #5db500;
    --fc-error: #ea3453;
    --fc-warning: #f9a600;
    --fc-info: #439aef;
    --fc-disabled: #b8bdc1;
    --bgc-success: #5db500;
    --bgc-error: #ea3453;
    --bgc-warning: #f9a600;
    --bgc-info: #439aef;
    --bgc-disabled: #f4f4f4;

    /* - 2.0  TYPOGRAPHY - */

    /* -- 2.1  Font Families -- */
    --ff-primary: 'Quasimoda', Arial, Helvetica, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* -- 2.2  Font Sizes (Device & Accessibility Responsive) -- */
    --fs-body: 1rem;
    /* 14px */
    --fs-overline: clamp(1.1429rem, 1.12rem + 0.10vw, 1.2857rem);
    /* 16px → 18px */
    --fs-h1: clamp(2.2857rem, 2.0617rem + 0.87vw, 2.8571rem) !important;
    /* 32px → 40px */
    --fs-h2: clamp(2rem, 1.8629rem + 0.60vw, 2.4286rem);
    /* 28px → 34px */
    --fs-h3: clamp(1.7143rem, 1.6rem + 0.45vw, 2rem);
    /* 24px → 28px */
    --fs-h4: clamp(1.4286rem, 1.36rem + 0.30vw, 1.7143rem);
    /* 20px → 24px */
    --fs-h5: clamp(1.2857rem, 1.2343rem + 0.20vw, 1.4286rem);
    /* 18px → 20px */
    --fs-h6: clamp(1.1429rem, 1.12rem + 0.10vw, 1.2857rem);
    /* 16px → 18px */
    --fs-primaryNav-desktop: clamp(1.071rem, 1.043rem + 0.124vw, 1.143rem);
    /* 15px → 16px */
    --fs-utilityNav-desktop: clamp(0.714rem, 0.686rem + 0.124vw, 0.786rem);
    /* 10px → 11px */

    /* -- 2.3  Font Weights -- */
    --fw-body: 300;
    /* Quasimoda Light */
    --fw-headings: 400;
    /* Quasimoda Regular */
    --fw-bold: 500;
    /* Quasimoda Medium */
    --fw-extraBold: 600;
    /* Quasimoda Semi Bold */
    --fw-heavy: 700;
    /* Quasimoda Bold */
    --fw-black: 800;
    /* Quasimoda Extra Bold */
    --fw-link-hover: 400;
    /* Quasimoda Regular */

    /* -- 2.4  Line Heights -- */
    --lh-relaxed: 1.6;
    --lh-comfortable: 1.5;
    --lh-body: 1.4;
    --lh-compact: 1.2;
    --lh-tight: 1.1;
    --lh-ultraTight: 1.0;

    /* -- 2.5  Letter Spacing -- */
    --ls-headings: -0.02em;

    /* - 3.0  FORMS - */

    /* -- 3.1  Contact Form 7 -- */
    --gap-form: 20px;
    --gap-500: 24px;
    --gap-600: 32px;
    --gap-100: 4px;
    --gap-200: 8px;
    --gap-300: 12px;
    --gap-400: 16px;
    --gap-500: 24px;
    --gap-600: 32px;
    --gap-700: 48px;

    --col-4: 500px;
    --col-8: 1020px;

    --fs-formSubmit-response: 1em;
    /* 14px */

    --color-border: #C0C0C0FF;
    --color-white: #FFFFFF;
    --color-placeholder: #787878;
    --color-accent: var(--marinaBay);
    --hover-accent: var(--marinaBay);
    --color-error: var(--livingCoral);

    --fs-xs: 14px;
    --fs-body: 1rem;
    /* 16px */
    --fs-xl: clamp(1rem, 0.964rem + 0.179vw, 1.125rem);
    /* (h6) 16px → 18px */
    --fs-h4: clamp(1.25rem, 1.071rem + 0.536vw, 1.5rem);
    /* (h4) 20px → 24px */
    --fs-h2: clamp(1.75rem, 1.393rem + 0.964vw, 2.25rem);
    /* (h2) 28px → 36px */
    --fs-h3: clamp(1.5rem, 1.25rem + 0.714vw, 2rem);
    /* (h3) 24px → 32px */

    --padding-input: 15px 30px;
    --trans: all 0.3s ease;
}