/* ==========================================================================
   VARIABLES.CSS
   Karleigh Jackson | Executive Editorial Portfolio
   Version: 2.0
   ========================================================================== */

/* ==========================================================================
   LOCAL FONTS
   ========================================================================== */

   @font-face {

    font-family: "Brittany Signature";
    src: url("../fonts/Brittany.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;

}

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

   :root {

    /* ======================================================================
       COLORS
       ====================================================================== */

    /* Neutral Foundation */

    --color-white: #FFFFFF;
    --color-background: #FCFCFB;
    --color-surface: #F7F7F5;
    --color-surface-alt: #F2F2EF;

    --color-charcoal: #18181B;
    --color-slate: #5C6470;
    --color-light-slate: #8A94A6;

    --color-border: #E7E8EA;
    --color-divider: #ECECEC;

    /* Accent System */

    --color-pink: #FF2D7A;
    --color-teal: #00E5E5;
    --color-blue: #2563EB;
    --color-purple: #7C3AED;
    --color-green: #00F57A;

    /* Hover States */

    --color-pink-hover: #E81E68;
    --color-teal-hover: #00D2D2;
    --color-blue-hover: #1F57D6;
    --color-purple-hover: #6D2DE0;
    --color-green-hover: #00DF70;

    /* Soft Backgrounds */

    --pink-soft: rgba(255,45,122,.08);
    --teal-soft: rgba(0,229,229,.08);
    --blue-soft: rgba(37,99,235,.08);
    --purple-soft: rgba(124,58,237,.08);
    --green-soft: rgba(0,245,122,.08);

    /* Typography Colors */

    --text-primary: var(--color-charcoal);
    --text-secondary: var(--color-slate);
    --text-light: var(--color-light-slate);

    /* ======================================================================
       TYPOGRAPHY
       ====================================================================== */

    /*
       Brittany Signature
       (Licensed local font)

       Fallback while developing:
       "Cormorant Garamond"
    */

    --font-signature:
    "Brittany Signature",
    "Cormorant Garamond",
    cursive;   

    --font-heading:
    "Cormorant Garamond",
    Georgia,
    serif;

    --font-body:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    /* Font Sizes */

    --fs-display: clamp(4rem, 7vw, 6.75rem);

    --fs-h1: clamp(3rem, 5vw, 5rem);
    --fs-h2: clamp(2.3rem, 4vw, 3.5rem);
    --fs-h3: clamp(1.8rem, 3vw, 2.5rem);
    --fs-h4: 1.5rem;

    --fs-xl: 1.375rem;
    --fs-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-small: .875rem;
    --fs-caption: .75rem;

    /* Font Weight */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Letter Spacing */

    --tracking-tight: -.03em;
    --tracking-normal: 0;
    --tracking-wide: .08em;
    --tracking-editorial: .32em;
    --tracking-logo: .45em;

    /* Line Heights */

    --lh-tight: 1.05;
    --lh-heading: 1.15;
    --lh-body: 1.75;

    /* ======================================================================
       SPACING SYSTEM
       8-Point Grid
       ====================================================================== */

    --space-1: .5rem;      /* 8px */
    --space-2: 1rem;       /* 16px */
    --space-3: 1.5rem;     /* 24px */
    --space-4: 2rem;       /* 32px */
    --space-5: 3rem;       /* 48px */
    --space-6: 4rem;       /* 64px */
    --space-7: 5rem;       /* 80px */
    --space-8: 6rem;       /* 96px */
    --space-9: 8rem;       /* 128px */
    --space-10: 10rem;     /* 160px */

    /* ======================================================================
       LAYOUT
       ====================================================================== */

    --container-width: 1320px;
    --content-width: 760px;
    --reading-width: 680px;

    --nav-height: 92px;

    --section-padding: var(--space-9);

    /* ======================================================================
       BORDER RADIUS
       ====================================================================== */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

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

    --shadow-xs:
        0 2px 8px rgba(0,0,0,.04);

    --shadow-sm:
        0 8px 24px rgba(0,0,0,.05);

    --shadow-md:
        0 18px 40px rgba(0,0,0,.08);

    --shadow-lg:
        0 28px 70px rgba(0,0,0,.12);

    /* ======================================================================
       TRANSITIONS
       ====================================================================== */

    --ease:
        cubic-bezier(.22,.61,.36,1);

    --transition-fast:
        180ms var(--ease);

    --transition:
        300ms var(--ease);

    --transition-slow:
        600ms var(--ease);

    /* ======================================================================
       Z INDEX
       ====================================================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-overlay: 900;
    --z-modal: 1000;

}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   (Documentation Only)
   ========================================================================== */

/*

Desktop XL
1600px+

Desktop
1400px

Laptop
1200px

Tablet
992px

Large Phone
768px

Phone
576px

Small Phone
420px

*/

/* ==========================================================================
   GLOBAL SELECTION
   ========================================================================== */

::selection {

    background: var(--color-pink);
    color: var(--color-white);

}