/*
 * Strata Design System — frontend-styles.css
 *
 * Table of contents (order matches this file)
 * -------------------------------------------
 * 1. Design tokens — :root (typography vars, colors, radius, shadows)
 * 2. Helpers — layout utilities (box-sizing, flex, width, visibility)
 * 3. Typography — text utilities, titles
 * 4. Standard HTML — definition lists, horizontal rule / divider
 * 5. Focus — :focus-visible (accessibility). Buttons, badges, empty states, and messages live in component CSS.
 */

/* ------------------------------------------------------------
   1. Design tokens (:root)
   Variables (Strata) — WordPress palette renamed for clarity.
------------------------------------------------------------ */

:root {
    /* Typography */
    --st-theme-font--heading: var(--wp--preset--font-family--poppins);
    --st-theme-font--body: var(--wp--preset--font-family--inter);

    /* Default colors */
    --st-color--gray-50: #f8fafc;
    --st-color--gray-100: #f1f5f9;
    --st-color--gray-200: #e2e8f0;
    --st-color--gray-300: #cbd5e1;
    --st-color--gray-400: #94a3b8;
    --st-color--gray-500: #64748b;
    --st-color--gray-600: #475569;
    --st-color--gray-700: #334155;
    --st-color--gray-800: #1e293b;
    --st-color--gray-900: #0f172a;
    --st-color--gray-950: #020617;

    --st-color--info: var(--wp--preset--color--vivid-cyan-blue);
    --st-color--info-lt: var(--wp--preset--color--pale-cyan-blue);
    --st-color--success: var(--wp--preset--color--vivid-green-cyan);
    --st-color--success-lt: var(--wp--preset--color--light-green-cyan);
    --st-color--warning: var(--wp--preset--color--luminous-vivid-amber);
    --st-color--warning-lt: var(--wp--preset--color--luminous-vivid-orange);
    --st-color--error: var(--wp--preset--color--vivid-red);
    --st-color--error-lt: var(--wp--preset--color--pale-pink);

    /* Theme colors */
    --st-color--base: var(--wp--preset--color--base);
    --st-color--contrast: var(--wp--preset--color--contrast);
    --st-color--accent-1: var(--wp--preset--color--accent-1);
    --st-color--accent-2: var(--wp--preset--color--accent-2);
    --st-color--accent-3: var(--wp--preset--color--accent-3);
    --st-color--accent-4: var(--wp--preset--color--accent-4);
    --st-color--accent-5: var(--wp--preset--color--accent-5);
    --st-color--accent-6: var(--wp--preset--color--accent-6);

    /* Named colors */
    --st-color--background: var(--st-color--base);
    --st-color--text: var(--st-color--contrast);
    --st-color--accent: var(--st-color--accent-1);
    --st-color--border: var(--st-color--gray-300);
    --st-color--border-hover: var(--st-color--gray-500);
    --st-color--border-focus: var(--st-color--accent-1);
    --st-color--border-error: var(--st-color--error);

    /* Radius */
    --st-radius--sm: 0.25rem;
    --st-radius--md: 0.5rem;
    --st-radius--lg: 1rem;
    --st-radius--xl: 1.5rem;
    --st-radius--fw: 9999rem;

    /* Shadows*/
    --st-shadow--sm: 0 0 0.5rem rgba(0, 0, 0, 0.15);
    --st-shadow--md: 0 0 1rem rgba(0, 0, 0, 0.15);
    --st-shadow--lg: 0 0 1.5rem rgba(0, 0, 0, 0.15);
    --st-shadow--xl: 0 0 2rem rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------------------------
   2. Helpers — layout & display utilities
------------------------------------------------------------ */

[class*="st_"],
[class*="st-"] {
    box-sizing: border-box;
}

/* Flex */

.st-flex {
    display: flex;
}

.st-flex-align-center {
    align-items: center;
}

.st-flex-align-start {
    align-items: start;
}

.st-flex-align-end {
    align-items: end;
}

.st-flex-justify-between {
    justify-content: space-between;
}

.st-flex-justify-center {
    justify-content: center;
}

.st-flex-justify-end {
    justify-content: end;
}

.st-flex-justify-start {
    justify-content: start;
}

.st-flex-justify-around {
    justify-content: space-around;
}

.st-flex-justify-evenly {
    justify-content: space-evenly;
}

.st-flex-wrap {
    flex-wrap: wrap;
}

.st-flex-nowrap {
    flex-wrap: nowrap;
}

.st-flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.st-flex-row {
    flex-direction: row;
}

.st-flex-row-reverse {
    flex-direction: row-reverse;
}

.st-flex-column {
    flex-direction: column;
}

.st-flex-column-reverse {
    flex-direction: column-reverse;
}

.st-flex-gap-1 {
    gap: 10px;
}

.st-flex-gap-2 {
    gap: 20px;
}

.st-flex-gap-3 {
    gap: 30px;
}

.st-flex-gap-4 {
    gap: 40px;
}

.st-flex-gap-5 {
    gap: 50px;
}

/* Width & visibility */

.st-full-width {
    width: 100% !important;
}

.st-is-hidden {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

.st-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------
   3. Typography
------------------------------------------------------------ */

.st-text-center {
    text-align: center !important;
}

.st-text-left {
    text-align: left !important;
}

.st-text-right {
    text-align: right !important;
}

.st-text-justify {
    text-align: justify !important;
}

.st-text-nowrap {
    white-space: nowrap !important;
}

.st-text-wrap {
    white-space: normal !important;
}

.st-text-pre {
    white-space: pre !important;
}

.st-text-pre-wrap {
    white-space: pre-wrap !important;
}

.st-text-pre-line {
    white-space: pre-line !important;
}

.st-title {
    margin: 0 0 0.5rem;
    font-family: var(--st-theme-font--heading);
    font-size: 1.1rem;
    font-weight: 600;
    font-style: normal;
    text-align: inherit;
    text-transform: initial;
    line-height: 1.25;
    letter-spacing: 0;
}

/* ------------------------------------------------------------
   4. Standard HTML — dl / dt / dd, hr
------------------------------------------------------------ */

[class*="st-dl--"] {
    display: grid;
}

.st-dl--vertical {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
}

.st-dl--horizontal {
    grid-template-columns: auto 1fr;
    row-gap: 0.5rem;
    column-gap: 1.5rem;
}

[class*="st-dl--"] dt {
    font-weight: 600;
}

[class*="st-dl--"] dd {
    margin: 0;
}

.st-divider {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--st-color--accent-5);
}

/* ------------------------------------------------------------
   5. Focus — :focus-visible (accessibility)
------------------------------------------------------------ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[class*="st-button--"]:focus-visible,
.st-button:focus-visible,
[class*="st-accordion__trigger"]:focus-visible,
[class*="a.st-"]:focus-visible {
    outline: 2px solid var(--st-color--accent);
    outline-offset: 2px;
}