/*!
Theme Name: Lignum Vitae Solutions
Theme URI: http://rickwhittington.com/
Author: Whittington Consulting
Author URI: http://rickwhittington.com/
Description: A Custom Theme Built by Whittington Consulting
Version: 1.041425.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: start-whit
*/
@import 'styles/globals.css';
@import 'styles/lignum.css';

@view-transition {
  navigation: auto;
}

:root {
    /* Colors */
    --color-marine: #006580;
    --color-marine-light: hsl(from var(--color-marine) h s 80%);
    --color-marine-dark: hsl(from var(--color-marine) h s 15%);
    --color-brown: #753f00;
    --color-brown-light: hsl(from var(--color-brown) h s 80%);
    --color-brown-dark: hsl(from var(--color-brown) h s 35%);
    --color-green: #00703c;
    --color-sand: #bf9b5f;
    --color-sand-light: hsl(from var(--color-sand) h s 80%);
    --color-steel: #929288;
    --color-steel-light: hsl(from var(--color-steel) h s 85%);
    --color-steel-mid: hsl(from var(--color-steel) h s 40%);
    --color-steel-dark: hsl(from var(--color-steel) h s 25%);
    --color-white: #ffffff;
    --color-black: #231f20;

    /* Starter Overwrite */
    --color-primary: var(--color-marine);
    --color-secondary: var(--color-green);
    --color-gray: var(--color-steel);

    /* Font Families */
    --font-sans: "Lexend", sans;

    /* Font Sizes */
    --font-size-h1: clamp(2.5rem, calc(1.328rem + 3.125vw), 4.063rem); /* min: 40px, max: 65px */
    --font-size-h2: clamp(2.188rem, calc(1.25rem + 2.5vw), 3.438rem); /* min: 35px, max: 55px */
    --font-size-h3: clamp(1.875rem, calc(1.313rem + 1.5vw), 2.625rem); /* min: 30px, max: 42px */
    --font-size-h4: clamp(1.563rem, calc(1.094rem + 1.25vw), 2.188rem); /* min: 25px, max: 35px */
    --font-size-h5: clamp(1.375rem, calc(1rem + 1vw), 1.75rem); /* min: 22px, max: 28px */
    --font-size-base: clamp(1.125rem, calc(0.938rem + 0.5vw), 1.375rem); /* min: 18px, max: 22px */
    --font-size-base-tiny: clamp(0.875rem, calc(0.781rem + 0.25vw), 1rem); /* min: 14px, max: 16px */
    --font-size-base-small: clamp(1rem, calc(0.906rem + 0.25vw), 1.125rem); /* min: 16px, max: 18px */
    --font-size-base-medium: clamp(1.25rem, calc(1.063rem + 0.5vw), 1.5rem); /* min: 20px, max: 24px */
    --font-size-base-large: clamp(1.5rem, calc(1.313rem + 0.5vw), 1.75rem); /* min: 24px, max: 28px */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi: 600;
    --font-weight-bold: 700;
    --font-weight-extra: 800;
    --font-weight-heavy: 900;

    /* Line Height */
    --line-height-base: 1.3;
    --line-height-headings: 1.1;
    --line-height-small: 1;

    /* Letter Spacing */
    --letter-spacing-base: 1.5px;
    --letter-spacing-small: 1.3px;
    --letter-spacing-large: 2px;

    /* Spacing */
    --spacing-tiny: 0.625rem; /* 10px */
    --spacing-small: 1.25rem; /* 20px */
    --spacing-medium: 1.875rem; /* 30px */
    --spacing-large: clamp(2.813rem, calc(2.109rem + 1.875vw), 3.75rem); /* min: 45px, max: 60px */
    --spacing-huge: clamp(3.75rem, calc(1.875rem + 5vw), 6.25rem); /* min: 60px, max: 100px */
    --spacing-giant: clamp(4.688rem, calc(1.172rem + 9.375vw), 9.375rem); /* min: 75px, max: 150px */

    /* Misc */
    --base-speed: .25s ease-in-out;
    --base-radius: 10px;
    --base-button-line: polygon(0 0,100% 51px,100% 100%,0 1px);

    /* Grid and Screen Sizes */
    --base-handheld: 460px;
    --base-handheldMax: 460px;
    --base-mobile: 767px;
    --base-mobileMax: 766px;
    --base-content-width: 960px;
    --base-tablet: 1024px;
    --base-tabletMax: 1023px;
    --base-desktop: 1400px;
    --base-desktopMax: 1439px;
    --base-maxwidth: 1440px;
    --base-grid: minmax(var(--spacing-small), 1fr) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12)) 
        minmax(0, calc(var(--base-maxwidth) / 12))
        minmax(var(--spacing-small), 1fr);
}