/* Brand tokens for True Dermatology.
   Values measured from this site's own rendered pages; the component
   stylesheets consume these so the shared library follows this brand. */

:root {
    --aqua-font-display: larken; /* display / headings */
    --aqua-font-heading: larken; /* section headings */
    --aqua-font-body:    Satoshi; /* body copy */
    --aqua-almost-black: #152229; /* primary dark text */
    --aqua-border-dark:  rgba(21, 34, 41, 0.15); /* hairline rules */
    --aqua-blue:         #117a7e; /* primary accent (teal) */
    --aqua-blue-gray:    #2a5962; /* deep accent */
    --aqua-light-blue:   #f2f7f7; /* tinted section background */
    --aqua-light-gray:   #f0f0f0; /* neutral surface */
    --aqua-white:        #ffffff; /* light text / surface */
    --aqua-orange:       #117a7e; /* hover accent */
    --aqua-rose:         #2a5962; /* secondary hover accent */
    --aqua-yellow:       #ffd154; /* rating stars (brand neutral) */

    --aqua-px: 116px; /* section inline padding */
    --aqua-py: 120px; /* section block padding */
}

@media (max-width: 1100px) {
    :root {
        --aqua-px: 60px;
    }
}

@media (max-width: 768px) {
    :root {
        --aqua-px: 24px;
        --aqua-py: 72px;
    }
}