/* =============================================================================
   PONDRMEET DESIGN SYSTEM
   ============================================================================= */

/* -----------------------------------------------------------------------------
   COLOURS
----------------------------------------------------------------------------- */

:root {

    --ink: #0A1D3C;
    --ink-soft: #3F4E66;
    --ink-faint: #788394;

    --gold: #A89062;
    --gold-deep: #8A7548;

    --paper: #FEFEFE;

    --rule: rgba(10, 29, 60, 0.14);

}

/* -----------------------------------------------------------------------------
   TYPOGRAPHY
----------------------------------------------------------------------------- */

:root {

    --font-heading: 'Fraunces', serif;
    --font-body: 'Karla', sans-serif;

}

/* -----------------------------------------------------------------------------
   LAYOUT
----------------------------------------------------------------------------- */

:root {

    --container-width: 1200px;

    --content-width: 760px;

    --measure: 34rem;

    --section-spacing: 6rem;

}

/* -----------------------------------------------------------------------------
   BORDERS
----------------------------------------------------------------------------- */

:root {

    --radius-small: 6px;
    --radius-medium: 10px;
    --radius-large: 20px;

}

/* -----------------------------------------------------------------------------
   ANIMATION
----------------------------------------------------------------------------- */

:root {

    --speed-fast: .25s;
    --speed-medium: .40s;
    --speed-slow: .70s;

}

/* ======================================================
   HERO CONTROLS
====================================================== */


/* Typography */

:root {

    --hero-tagline-font: var(--font-body);

    --hero-title-font: 'Playfair Display', serif;

    --hero-description-font: var(--font-body);



    /* Sizes */

    --hero-tagline-size: 18px;

    /* --hero-title-size: clamp(40px, 5vw, 72px); */

    --hero-title-size: clamp(56px, 7vw, 96px);

    --hero-description-size: clamp(16px, 2vw, 24px);



   /* Colours */


   --hero-title-colour: #243858;

   --hero-tagline-colour: var(--ink);

   --hero-description-colour: var(--paper);


   /* Text shadow */

   --hero-text-shadow:0 2px 10px rgba(0,0,0,0.55);



    /* Spacing */

    --hero-tagline-spacing: 20px;

    --hero-title-spacing: 25px;

    --hero-description-spacing: 0;



    /* Position */

    --hero-text-position: 48%;

    --hero-cta-position: 75%;

}