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

:root {
    /* Typography */
    --font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    --h1-size: 64px;
    --h1-weight: 700;
    --h1-ls: -0.02em;

    --h2-size: 40px;
    --h2-weight: 700;
    --h2-ls: -0.02em;

    --h3-size: 24px;
    --h3-weight: 700;
    --h3-ls: -0.02em;

    --body-size: 16px;
    --body-weight: 400;
    --body-lh: 1.4;

    --small-size: 14px;
    --pretitle-size: 10px;
    --pretitle-ls: 0.03em;

    --btn-l-size: 14px;
    --btn-m-size: 12px;
    --btn-s-size: 10px;
    --btn-ls: 0.03em;

    /* =========================================================
       Brand palette (raw)
       ========================================================= */
    --c-dark-violet: #0A145D;
    --c-iris: #0429F2;
    --c-blue-sky: #85B3ED;
    --c-onyx: #0E0E2C;
    --c-evergreen: #16AC52;
    --c-ruby: #F63B37;
    --c-slate: #4A4A68;
    --c-light-slate: #8C8CA1;
    --c-dorian: #C9D3E0;
    --c-cloud: #E9EFF4;

    /* =========================================================
       Semantic tokens (usage)
       ========================================================= */
    --color-primary: var(--c-dark-violet); /* CTAs / Focused / Active */
    --color-secondary: var(--c-iris); /* Links */
    --color-tertiary: var(--c-blue-sky); /* Accents / Illustrations */

    --color-dark: var(--c-onyx); /* Overlays / Shadows / Headings */
    --color-success: var(--c-evergreen); /* Success messages */
    --color-error: var(--c-ruby); /* Error messages */

    --color-text: var(--c-slate); /* Body text */
    --color-subtle-text: var(--c-light-slate); /* Helper / Deemphasized text */

    --color-accent: var(--c-dorian); /* Hairlines / Subtle backgrounds */
    --color-bg: var(--c-cloud); /* Light mode backgrounds */
}

/* Typography classes */
.t-h1 {
    font-family: var(--font-family);
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    letter-spacing: var(--h1-ls);
}

.t-h2 {
    font-family: var(--font-family);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    letter-spacing: var(--h2-ls);
}

.t-h3 {
    font-family: var(--font-family);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    letter-spacing: var(--h3-ls);
}

.t-body {
    font-family: var(--font-family);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    line-height: var(--body-lh);
}

.t-small {
    font-family: var(--font-family);
    font-size: var(--small-size);
    font-weight: 400;
}

.t-pretitle {
    font-family: var(--font-family);
    font-size: var(--pretitle-size);
    font-weight: 700;
    letter-spacing: var(--pretitle-ls);
    text-transform: uppercase;
}

.t-btn-l {
    font-family: var(--font-family);
    font-size: var(--btn-l-size);
    font-weight: 600;
    letter-spacing: var(--btn-ls);
}

.t-btn-m {
    font-family: var(--font-family);
    font-size: var(--btn-m-size);
    font-weight: 600;
    letter-spacing: var(--btn-ls);
}

.t-btn-s {
    font-family: var(--font-family);
    font-size: var(--btn-s-size);
    font-weight: 600;
    letter-spacing: var(--btn-ls);
}

.t-link {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
}

/* =========================================================
   Utility classes — semantic (recommended in UI)
   ========================================================= */
.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-tertiary {
    color: var(--color-tertiary);
}

.text-dark {
    color: var(--color-dark);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text {
    color: var(--color-text);
}

.text-subtle {
    color: var(--color-subtle-text);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-tertiary {
    background-color: var(--color-tertiary);
}

.bg-dark {
    background-color: var(--color-dark);
}

.bg-success {
    background-color: var(--color-success);
}

.bg-error {
    background-color: var(--color-error);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg {
    background-color: var(--color-bg);
}

.border-primary {
    border-color: var(--color-primary);
}

.border-secondary {
    border-color: var(--color-secondary);
}

.border-tertiary {
    border-color: var(--color-tertiary);
}

.border-dark {
    border-color: var(--color-dark);
}

.border-success {
    border-color: var(--color-success);
}

.border-error {
    border-color: var(--color-error);
}

.border-accent {
    border-color: var(--color-accent);
}

/* =========================================================
   Utility classes — raw palette
   ========================================================= */
.text-dark-violet {
    color: var(--c-dark-violet);
}

.text-iris {
    color: var(--c-iris);
}

.text-blue-sky {
    color: var(--c-blue-sky);
}

.text-onyx {
    color: var(--c-onyx);
}

.text-evergreen {
    color: var(--c-evergreen);
}

.text-ruby {
    color: var(--c-ruby);
}

.text-slate {
    color: var(--c-slate);
}

.text-light-slate {
    color: var(--c-light-slate);
}

.text-dorian {
    color: var(--c-dorian);
}

.text-cloud {
    color: var(--c-cloud);
}

.bg-dark-violet {
    background-color: var(--c-dark-violet);
}

.bg-iris {
    background-color: var(--c-iris);
}

.bg-blue-sky {
    background-color: var(--c-blue-sky);
}

.bg-onyx {
    background-color: var(--c-onyx);
}

.bg-evergreen {
    background-color: var(--c-evergreen);
}

.bg-ruby {
    background-color: var(--c-ruby);
}

.bg-slate {
    background-color: var(--c-slate);
}

.bg-light-slate {
    background-color: var(--c-light-slate);
}

.bg-dorian {
    background-color: var(--c-dorian);
}

.bg-cloud {
    background-color: var(--c-cloud);
}

.border-dark-violet {
    border-color: var(--c-dark-violet);
}

.border-iris {
    border-color: var(--c-iris);
}

.border-blue-sky {
    border-color: var(--c-blue-sky);
}

.border-onyx {
    border-color: var(--c-onyx);
}

.border-evergreen {
    border-color: var(--c-evergreen);
}

.border-ruby {
    border-color: var(--c-ruby);
}

.border-slate {
    border-color: var(--c-slate);
}

.border-light-slate {
    border-color: var(--c-light-slate);
}

.border-dorian {
    border-color: var(--c-dorian);
}

.border-cloud {
    border-color: var(--c-cloud);
}

:root {
    /* =========================================================
       Missing typography tokens (added, existing not changed)
       ========================================================= */

    /* Subtitle / Body */
    --subtitle-l-size: 24px;
    --subtitle-m-size: 20px;
    --subtitle-s-size: 18px;
    --subtitle-weight: 500;

    /* Bold body text */
    --bold-weight: 700;

    /* Optional line-heights (if you want consistent rhythm later) */
    --subtitle-lh: 1.4;
}

/* =========================================================
   Added typography classes (non-breaking)
   ========================================================= */

/* Subtitle / Body Large */
.t-subtitle-l {
    font-family: var(--font-family);
    font-size: var(--subtitle-l-size);
    font-weight: var(--subtitle-weight);
    line-height: var(--subtitle-lh);
}

/* Subtitle / Body Medium */
.t-subtitle-m {
    font-family: var(--font-family);
    font-size: var(--subtitle-m-size);
    font-weight: var(--subtitle-weight);
    line-height: var(--subtitle-lh);
}

/* Subtitle / Body Small */
.t-subtitle-s {
    font-family: var(--font-family);
    font-size: var(--subtitle-s-size);
    font-weight: var(--subtitle-weight);
    line-height: var(--subtitle-lh);
}

/* Bold (for body text) */
.t-bold {
    font-family: var(--font-family);
    font-weight: var(--bold-weight);
}