/*
Theme Name: LegalRev Foundation
Theme URI:
Author:
Author URI:
Description: Bricks child theme for LegalRev Foundation.
Version: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: bricks
Text Domain: legalrev-foundation
*/


/*
FOUNDATION REFERENCE VARIABLES
⚠️ Reference only — Use Bricks Builder to modify variables.
*/

:ref {

    /* ==========================================================================
    🎨 COLOR
       ========================================================================== */

    /* Primary
       Main brand color (base) + 4 shades (2 dark, 2 light) */
    --primary-xdark: #121F49;
    --primary-dark: #20386F;
    --primary-base: #325AAC;
    --primary-light: #6FB2E2;
    --primary-xlight: #DCEFF9;

    /* Secondary
       CTA / violator color (base) + 4 shades (2 dark, 2 light) */
    --secondary-xdark: #331200;
    --secondary-dark: #B23700;
    --secondary-base: #ED794F;
    --secondary-light: #F8AB95;
    --secondary-xlight: #FCE3DE;

    /* Neutrals
       7 gray shades — can be tinted cool, warm, purple, etc. */
    --neutral-xxdark: #0B0C0D;
    --neutral-xdark: #232426;
    --neutral-dark: #343638;
    --neutral-base: #686C70;
    --neutral-light: #AEB1B3;
    --neutral-xlight: #F3F4F5;
    --neutral-xxlight: #FFFFFF;


    /* ==========================================================================
    🔠 TYPE
       Fluid clamp system: 360px (mobile) → 1200px (desktop)
       ========================================================================== */

    /* Headings */
    --headings-x-l: clamp(32px, calc(21.71px + 2.86vw), 56px);
    --headings-l: clamp(24px, calc(17.14px + 1.90vw), 40px);
    --headings-m: clamp(24px, calc(20.57px + 0.95vw), 32px);
    --headings-s: clamp(22px, calc(21.14px + 0.24vw), 24px);
    --headings-x-s: clamp(16px, calc(14.29px + 0.48vw), 20px);

    /* Body */
    --body-l: clamp(16px, calc(15.57px + 0.12vw), 17px);
    --body-m: clamp(15px, calc(14.57px + 0.12vw), 16px);
    --body-s: clamp(14px, calc(13.57px + 0.12vw), 15px);

    /* Nav / Buttons / UI — fixed, identical at all breakpoints */
    --nav-l: 18px;
    --nav-m: 16px;
    --nav-s: 14.5px;

    /* ==========================================================================
    📐 SPACE
       Fluid spacing system never changes.
       ========================================================================== */
    --space-xxs: clamp(10px, calc(10px + 10 * ((100vw - 360px) / 840)), 20px);
    --space-xs: clamp(20px, calc(20px + 10 * ((100vw - 360px) / 840)), 30px);
    --space-s: clamp(30px, calc(30px + 10 * ((100vw - 360px) / 840)), 40px);
    --space-m: clamp(40px, calc(40px + 20 * ((100vw - 360px) / 840)), 60px);
    --space-l: clamp(60px, calc(60px + 20 * ((100vw - 360px) / 840)), 80px);
    --space-xl: clamp(90px, calc(90px + 30 * ((100vw - 360px) / 840)), 120px);
    --space-xxl: clamp(120px, calc(120px + 80 * ((100vw - 360px) / 840)), 200px);


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

    --shadow-s: 0px 2px 4px rgba(0, 0, 0, 0.02);
    --shadow-m: 0px 5px 10px rgba(0, 0, 0, 0.03);
    --shadow-l: 0px 10px 24px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0px 20px 48px rgba(0, 0, 0, 0.10);


    /* ==========================================================================
    🔄 ANIMATIONS
       ========================================================================== */

    --anim-fast: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
    --anim-mid: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
    --anim-slow: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1.0);

}