/* =============================================================================
   THE JOINT CHIROPRACTIC — MASTER CSS
   =============================================================================
   Built from official Figma design tokens (inter.json + colors.json).
   Single source of truth for brand colors, typography, and shared styles.

   STATUS: ** NOT LOADED IN ANY TEMPLATE YET **
   To enable, add to layout template(s):
   <link rel="stylesheet" href="/assets/css/master.css" />

   Last updated: 2026-05-23
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');


/* =============================================================================
   1. DESIGN TOKENS — Colors
   ============================================================================= */

:root {

    /* Primary */
    --color-wellness-teal:          #00A4AF;
    --color-pulse-blue:             #006998;

    /* Secondary */
    --color-charcoal:               #28282A;
    --color-white:                  #FFFFFF;
    --color-greige-100:             #C8C6C4;   /* borders, dividers */
    --color-greige-20:              #F4F4F3;   /* light section background */
    --color-urgent-orange:          #F4B959;

    /* Semantic */
    --color-error:                  #F7004A;
    --color-confirmation:           #00CC6A;
    --color-warning:                #FFAE00;

    /* Text */
    --color-text-black:             #000000;
    --color-text-white:             #FFFFFF;
    --color-text-teal:              #00A4AF;
    --color-text-charcoal:          #28282A;
    --color-text-disabled:          #00000080;

    /* Buttons */
    --color-btn-primary:            #00A4AF;
    --color-btn-primary-hover:      #008F98;
    --color-btn-secondary:          #FFFFFF;
    --color-btn-secondary-hover:    #F4F4F3;
    --color-btn-tertiary:           #000000;
    --color-btn-tertiary-hover:     #28282A;
    --color-btn-disabled:           #0000001a;

    /* Dropdowns */
    --color-dropdown-default:       #FFFFFF;
    --color-dropdown-hover:         #F2F7FA;
    --color-dropdown-pressing:      #BEC1C2;
    --color-dropdown-active:        #C3D8E1;

    /* Categories */
    --color-cat-chiro101:           #006998;
    --color-cat-community:          #6566E5;
    --color-cat-wellness:           #00A4AF;
    --color-cat-relief:             #D14076;
    --color-cat-active-lifestyle:   #E85E33;

    /* Background */
    --color-bg-white:               #FFFFFF;
    --color-bg-light:               #F4F4F3;
    --color-gradient-start:         #00A4AF;
    --color-gradient-end:           #006998;


    /* =========================================================================
       2. DESIGN TOKENS — Typography (Inter)
       ========================================================================= */

    --font-family:                  "Inter", sans-serif;

    /* Font weights */
    --font-regular:                 400;
    --font-medium:                  500;
    --font-semi-bold:               600;
    --font-bold:                    700;
    --font-extra-bold:              800;
    --font-black:                   900;

    /* Font sizes — body */
    --font-size-body-sm:            0.875rem;   /* 14px */
    --font-size-body-md:            1rem;       /* 16px */
    --font-size-body-lg:            1.125rem;   /* 18px */

    /* Font sizes — headings */
    --font-size-h3:                 1.375rem;   /* 22px */
    --font-size-h2:                 1.75rem;    /* 28px */
    --font-size-h1:                 2.25rem;    /* 36px */

    /* Font sizes — display */
    --font-size-display-md:         2.813rem;   /* 45px */
    --font-size-display-lg:         3.563rem;   /* 57px */

    /* Font sizes — labels */
    --font-size-label:              0.75rem;    /* 12px */
    --font-size-disclaimer:         0.625rem;   /* 10px */

    /* Line heights — body */
    --line-height-body-sm:          1.25rem;    /* 20px */
    --line-height-body-md:          1.5rem;     /* 24px */
    --line-height-body-lg:          1.75rem;    /* 28px */

    /* Line heights — headings */
    --line-height-h3:               1.875rem;   /* 30px */
    --line-height-h2:               2.25rem;    /* 36px */
    --line-height-h1:               2.75rem;    /* 44px */

    /* Line heights — display */
    --line-height-display-md:       3.25rem;    /* 52px */
    --line-height-display-lg:       4rem;       /* 64px */

    /* Line heights — labels */
    --line-height-label:            1rem;       /* 16px */
    --line-height-label-eyebrow:    1.5rem;     /* 24px */
    --line-height-disclaimer:       0.9375rem;  /* 15px */

    /* Letter spacing */
    --letter-spacing-default:       0%;
    --letter-spacing-label:         0.01em;
    --letter-spacing-display:       -0.005em;
}


/* =============================================================================
   3. BASE TYPOGRAPHY
   ============================================================================= */

body {
    font-family: var(--font-family);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-regular);
    line-height: var(--line-height-body-md);
    color: var(--color-text-charcoal);
}

/* Display */
.display-large {
    font-family: var(--font-family);
    font-size: var(--font-size-display-lg);
    font-weight: var(--font-black);
    line-height: var(--line-height-display-lg);
    letter-spacing: var(--letter-spacing-display);
    text-transform: capitalize;
}

.display-medium {
    font-family: var(--font-family);
    font-size: var(--font-size-display-md);
    font-weight: var(--font-bold);
    line-height: var(--line-height-display-md);
    letter-spacing: var(--letter-spacing-display);
    text-transform: capitalize;
}

/* Headings */
h1 {
    font-family: var(--font-family);
    font-size: var(--font-size-h1);
    font-weight: var(--font-extra-bold);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-default);
    color: var(--color-text-charcoal);
    margin-top: 0;
}

h2 {
    font-family: var(--font-family);
    font-size: var(--font-size-h2);
    font-weight: var(--font-semi-bold);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-default);
    color: var(--color-text-charcoal);
    margin-top: 0;
}

h3 {
    font-family: var(--font-family);
    font-size: var(--font-size-h3);
    font-weight: var(--font-medium);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-default);
    color: var(--color-text-charcoal);
    margin-top: 0;
}

/* Body */
p,
.body-default {
    font-family: var(--font-family);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-regular);
    line-height: var(--line-height-body-md);
    letter-spacing: var(--letter-spacing-default);
}

.body-large {
    font-family: var(--font-family);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-regular);
    line-height: var(--line-height-body-lg);
    letter-spacing: var(--letter-spacing-default);
}

.body-small {
    font-family: var(--font-family);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-regular);
    line-height: var(--line-height-body-sm);
    letter-spacing: var(--letter-spacing-default);
}

/* Labels */
.label-eyebrow {
    font-family: var(--font-family);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-medium);
    line-height: var(--line-height-label-eyebrow);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

.label-bold {
    font-family: var(--font-family);
    font-size: var(--font-size-label);
    font-weight: var(--font-bold);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-label);
}

.label-medium {
    font-family: var(--font-family);
    font-size: var(--font-size-label);
    font-weight: var(--font-medium);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-label);
}

.label-disclaimer {
    font-family: var(--font-family);
    font-size: var(--font-size-disclaimer);
    font-weight: var(--font-regular);
    line-height: var(--line-height-disclaimer);
    letter-spacing: var(--letter-spacing-label);
}

/* Links */
a {
    color: var(--color-wellness-teal);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--color-btn-primary-hover);
}


/* =============================================================================
   4. BUTTONS
   ============================================================================= */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-btn-primary);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-semi-bold);
    line-height: var(--line-height-body-md);
    padding: 14px 28px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn-primary:hover {
    background-color: var(--color-btn-primary-hover);
    color: var(--color-white);
    text-decoration: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-btn-secondary);
    color: var(--color-wellness-teal);
    font-family: var(--font-family);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-semi-bold);
    line-height: var(--line-height-body-md);
    padding: 13px 28px;
    border-radius: 9999px;
    border: 2px solid var(--color-wellness-teal);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-secondary:hover {
    background-color: var(--color-btn-secondary-hover);
    color: var(--color-wellness-teal);
}

.btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-btn-tertiary);
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-semi-bold);
    line-height: var(--line-height-body-md);
    padding: 14px 28px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn-tertiary:hover {
    background-color: var(--color-btn-tertiary-hover);
    color: var(--color-white);
}

.btn-disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled {
    background-color: var(--color-btn-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}


/* =============================================================================
   5. BACKGROUNDS & SECTION UTILITIES
   ============================================================================= */

.bg-white    { background-color: var(--color-bg-white); }
.bg-light    { background-color: var(--color-bg-light); }
.bg-teal     { background-color: var(--color-wellness-teal); color: var(--color-white); }
.bg-charcoal { background-color: var(--color-charcoal); color: var(--color-white); }
.bg-gradient {
    background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
    color: var(--color-white);
}


/* =============================================================================
   6. CATEGORY TAGS
   ============================================================================= */

.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 9999px; font-family: var(--font-family); font-size: var(--font-size-label); font-weight: var(--font-medium); letter-spacing: var(--letter-spacing-label); }
.tag-chiro101        { background-color: #0069981a; color: var(--color-cat-chiro101); }
.tag-community       { background-color: #6566E51a; color: var(--color-cat-community); }
.tag-wellness        { background-color: #00A4AF1a; color: var(--color-cat-wellness); }
.tag-relief          { background-color: #D140761a; color: var(--color-cat-relief); }
.tag-active-lifestyle{ background-color: #E85E331a; color: var(--color-cat-active-lifestyle); }
.tag-light           { background-color: var(--color-greige-20); color: var(--color-text-disabled); }
.tag-dark            { background-color: #0000001a; color: var(--color-greige-20); }


/* =============================================================================
   7. RESPONSIVE BREAKPOINTS
   =============================================================================
   Mobile:   max-width: 768px
   Tablet:   769px – 991px
   Desktop:  min-width: 992px
   Wide:     min-width: 1200px
   ============================================================================= */

@media (max-width: 768px) {
    h1 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
    h2 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
    .display-large { font-size: var(--font-size-display-md); line-height: var(--line-height-display-md); }
    .display-medium { font-size: var(--font-size-h1); line-height: var(--line-height-h1); }
}

@media (max-width: 480px) {
    h1 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
    h2 { font-size: 1.25rem; line-height: 1.75rem; }
}