/*****
 * LINECO Base: Variables
 *
******/

:root {
    /* NOTE: Spec usage notes in comments. */


    /** Colors **/

    /* Primary Blues */
    --primary-cyan-900: #093237;  /* Cyan–900: Pressed state of the primary button and link, footer color */
    --primary-cyan-800: #09505a;  /* Cyan–800: Primary button color, link color, icon color, and decorative elements, navigation background color */
    --primary-cyan-700: #0c6a7e;  /* Cyan–700: Primary button and link hover state, inverse section background */
    --primary-cyan-600: #067f9a;  /* */
    --primary-cyan-500: #33a6ca;  /* */
    --primary-cyan-400: #33ebdd;  /* */
    --primary-cyan-300: #8dd6ec;  /* Cyan–300: Secondary button pressed state */
    --primary-cyan-200: #c6e4f1;  /* Cyan–200: Secondary button color */
    --primary-cyan-100: #e0f2fe;  /* Cyan–100: Secondary button hover state, announcement alert styles and specialty section background */

    /* Accent Yellows */
    /* Note: watch for --accent-yellow typos from earlier draft. */
    --accent-gold-800: #7b4b05;  /* Gold–800: Alert tag text color   */
    --accent-gold-700: #a16207;  /* */
    --accent-gold-600: #ca8a04;  /* */
    --accent-gold-500: #e4af24;  /* Gold–500: Data visualization (gradient - dark, solid), selection color */
    --accent-gold-400: #fbbf24;  /* Gold–400: inverse links, inverse hairline rule; DN: Here states for tabs/nav */
    --accent-gold-300: #fcd34d;  /* Gold–300:  Data visualization (gradient - light), tertiary underline pressed state, specialty background color */
    --accent-gold-200: #fde68a;  /* Gold–200: Tertiary button hover state color */

    /* Neutral Colors */
    /* Note: AKA black and grey and white colors. */
    --neutral-900: #111827;  /* Neutral–900: Text color for Labels, Body, Paragraph, Small Text, and Caption styles */
    --neutral-800: #181a19;  /* Neutral-800: Text style for all Heading text styles */
    --neutral-700: #242b2a;  /* Neutral-700: Eyebrow text color, helper text color */
    --neutral-600: #434d4c;  /* */
    --neutral-500: #667574;  /* Neutral–500: Dotted line color */
    --neutral-400: #8d9c9b;  /* Neutral-400: Hairline rule, drop shadow, disabled state */
    --neutral-300: #b3c2c1;  /* Neutral-300: Form input borders, data accents */
    --neutral-250: #d1d5dB;  /* Neutral-250: Background (gauge graph; marked as Neutral-300 in mockup) */
    --neutral-200: #dfe9e8;  /* Neutral-200: Secondary background */
    --neutral-150: #eeeded;  /* Neutral-150: Secondary background (variance; marked as neutral-200 in mockup) */
    --neutral-100: #f5f8f9;  /* Neutral-100: Primary background, primary button text color */
    --neutral-white: #fff;


    /** Alert Colors **/

    /* Success (Green) */
    --success-900: #0a2912;  /* */
    --success-800: #145224;  /* */
    --success-700: #1f7a35;  /* Success-700: Alert banner text + icon color, tag */
    --success-600: #29a347;  /* */
    --success-500: #33cc59;  /* */
    --success-400: #5cd67a;  /* Success-400: Status tag background color */
    --success-300: #85e09b;  /* */
    --success-200: #adebbd;  /* */
    --success-100: #d6f5de;  /* Success-100: Alert banner background color */

    /* Warning (Yellow) */
    --warning-900: #332700;  /* */
    --warning-800: #664e00;  /* Warning-800: Alert tag text color */
    --warning-700: #997500;  /* Warning-700:  Alert tag + banner icon color */
    --warning-600: #cc9c00;  /* */
    --warning-500: #ffc300;  /* */
    --warning-400: #ffcf33;  /* */
    --warning-300: #ffdb66;  /* */
    --warning-200: #ffe799;  /* Warning-200: Alert banner background color */
    --warning-100: #fff3cc;  /* */

    /* Error (Red) */
    --error-900: #2f0409;  /* */
    --error-800: #5e0812;  /* */
    --error-700: #8e0b1b;  /* Error-700: Negative button pressed state color, Alert tag text color */
    --error-600: #bd0f24;  /* Error-600: Negative button, alert tag icon color */
    --error-500: #e2122b;  /* Error-500: Negative button hover state color */
    --error-400: #f04257;  /* */
    --error-300: #fa8694;  /* */
    --error-200: #fec6cc;  /* Error-200: Alert banner background color */
    --error-100: #ffe9ec;  /* Error-100: Negative button disabled state */


    /** Strings and Arrays **/

    /* Fonts */
    --font-stack--heebo: "Heebo", Georgia, Times, "Times New Roman", sans-serif;
    --font-stack--open-sans: "Open Sans", Arial, sans-serif;
    --font-stack--icons: "Phosphor" !important;


    /** Lengths **/

    --site-max-width: 1440px;

    /* Font Sizes */
    --font-size-100: 0.75rem;      /* 12px */
    --font-size-200: 0.88875rem;   /* 14.22px */
    --font-size-300: 1rem;         /* 16px */
    --font-size-400: 1.13875rem;   /* 18.22px */
    --font-size-500: 1.25rem;      /* 20px */
    --font-size-600: 1.5rem;       /* 24px */
    --font-size-700: 1.75rem;      /* 28px */
    --font-size-800: 2rem;         /* 32px */
    --font-size-900: 2.5rem;       /* 40px */

    /* Timing */
    --timing-medium: 0.6s;

    /* Icons */
    --icon-carat-down: "\e9fe";
}