/*
 * AI Automation Toolbox typography system.
 * Page-specific CSS should not redefine fonts unless a component has a
 * genuine special need such as code output or a third-party/public microsite.
 */

:root {
    --aat-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
    --aat-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --aat-font-size-xs: .75rem;
    --aat-font-size-sm: .86rem;
    --aat-font-size-base: .95rem;
    --aat-font-size-md: 1rem;
    --aat-font-size-lg: 1.12rem;
    --aat-font-size-xl: 1.35rem;
    --aat-font-size-2xl: 2rem;
    --aat-font-size-hero: 4.4rem;

    --aat-line-tight: 1.08;
    --aat-line-heading: 1.18;
    --aat-line-body: 1.5;
    --aat-line-loose: 1.6;
}

html {
    font-family: var(--aat-font-sans);
    font-size: 16px;
}

body,
button,
input,
select,
textarea {
    font-family: var(--aat-font-sans);
    font-size: var(--aat-font-size-base);
    line-height: var(--aat-line-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

h1,
.page-title,
.brand h1,
.page-head h1 {
    margin: 2px 0 5px;
    color: var(--aat-text-strong);
    font-size: var(--aat-font-size-2xl);
    font-weight: 850;
    line-height: var(--aat-line-heading);
    letter-spacing: 0;
}

.aat-public-hero h1,
.hero h1 {
    font-size: var(--aat-font-size-hero);
    line-height: var(--aat-line-tight);
}

h2,
.section-title,
.section-head h2,
.card-title {
    color: var(--aat-text-strong);
    font-size: var(--aat-font-size-xl);
    font-weight: 800;
    line-height: var(--aat-line-heading);
    letter-spacing: 0;
}

h3,
.card h3,
.aat-card h3,
.provider-card h3,
.metric strong {
    color: var(--aat-text-strong);
    font-size: var(--aat-font-size-lg);
    font-weight: 800;
    line-height: var(--aat-line-heading);
    letter-spacing: 0;
}

p,
li,
td,
dd {
    line-height: var(--aat-line-body);
}

.brand p,
.page-head p,
.section-head p,
.muted,
.helper,
.field-help,
.form-help,
.card-subtitle,
.lead,
.small,
small {
    color: var(--aat-text-muted);
}

.eyebrow,
.kicker,
.section-label,
.mini-label,
.aat-row-label,
.aat-biz-row-label,
.hf-guide-kicker,
.metric span,
.stat-title {
    color: var(--aat-orange);
    font-size: var(--aat-font-size-xs);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

label,
.field-label {
    font-weight: 800;
}

button,
.btn,
.button,
.aat-btn,
.hf-btn,
.aat-biz-tab,
.aat-ai-tab,
.aat-nav-btn {
    font-weight: 800;
    line-height: 1.15;
}

code,
pre,
.hf-output,
.sc-output,
.aat-code,
.code {
    font-family: var(--aat-font-mono);
}

th {
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ait-site-header-title {
    color: var(--aat-orange);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0;
}

.ait-site-header-dropdown a,
.ait-site-header-dropdown form.ait-site-header-logout button,
.aat-shared-nav .aat-nav-btn {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

@media (max-width: 900px) {
    :root {
        --aat-font-size-hero: 3.1rem;
    }
}

@media (max-width: 520px) {
    :root {
        --aat-font-size-2xl: 1.65rem;
        --aat-font-size-hero: 2.45rem;
    }
}

/* =========================================================
   AAT BEVELED TEXT
   Reusable orange + white text effects
   ========================================================= */

/* ---------- Regular beveled text ---------- */

.aat-bevel-orange,
.bevel-orange {
    color: #ffa500;
    font-weight: 800;
    text-shadow:
        0 1px 0 rgba(255, 221, 153, .65),
        0 2px 0 rgba(214, 132, 0, .95),
        0 3px 1px rgba(121, 72, 0, .9),
        0 4px 7px rgba(0, 0, 0, .5);
}

.aat-bevel-white,
.bevel-white {
    color: #ffffff;
    font-weight: 800;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .8),
        0 2px 0 rgba(190, 190, 190, .95),
        0 3px 1px rgba(90, 90, 90, .8),
        0 4px 7px rgba(0, 0, 0, .55);
}


/* ---------- Header beveled text ---------- */

.aat-bevel-heading-orange,
.bevel-heading-orange {
    color: #ffa500;
    font-weight: 950;
    letter-spacing: -.02em;
    text-shadow:
        0 1px 0 #ffd27a,
        0 2px 0 #f2a008,
        0 3px 0 #cf8500,
        0 4px 0 #9f6500,
        0 6px 10px rgba(0, 0, 0, .6);
}

.aat-bevel-heading-white,
.bevel-heading-white {
    color: #ffffff;
    font-weight: 950;
    letter-spacing: -.02em;
    text-shadow:
        0 1px 0 #ffffff,
        0 2px 0 #dddddd,
        0 3px 0 #bdbdbd,
        0 4px 0 #8c8c8c,
        0 6px 10px rgba(0, 0, 0, .6);
}


/* ---------- Metallic header variants ---------- */

.aat-bevel-metal-orange,
.bevel-metal-orange {
    font-weight: 950;
    background: linear-gradient(
        180deg,
        #fff0bf 0%,
        #ffc34d 20%,
        #ffa500 48%,
        #d88700 72%,
        #ffb62e 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .18),
        0 3px 2px rgba(0, 0, 0, .3),
        0 6px 12px rgba(0, 0, 0, .5);
}

.aat-bevel-metal-white,
.bevel-metal-white {
    font-weight: 950;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f3f3f3 22%,
        #d8d8d8 50%,
        #a9a9a9 75%,
        #ffffff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .2),
        0 3px 2px rgba(0, 0, 0, .28),
        0 6px 12px rgba(0, 0, 0, .5);
}


/* ---------- Tag / badge beveled text ---------- */

.aat-bevel-tag-orange,
.bevel-tag-orange {
    color: #ffa500;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-shadow:
        0 1px 0 rgba(255, 222, 160, .7),
        0 2px 0 rgba(173, 102, 0, .9),
        0 3px 5px rgba(0, 0, 0, .45);
}

.aat-bevel-tag-white,
.bevel-tag-white {
    color: #ffffff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .8),
        0 2px 0 rgba(150, 150, 150, .9),
        0 3px 5px rgba(0, 0, 0, .45);
}


/* ---------- Optional semantic helpers ---------- */

h1.aat-bevel-orange,
h2.aat-bevel-orange,
h3.aat-bevel-orange,
h4.aat-bevel-orange,
h5.aat-bevel-orange,
h6.aat-bevel-orange {
    font-weight: 950;
}

h1.aat-bevel-white,
h2.aat-bevel-white,
h3.aat-bevel-white,
h4.aat-bevel-white,
h5.aat-bevel-white,
h6.aat-bevel-white {
    font-weight: 950;
}