/*
 * Approach Auto Care — Brand Tokens
 * Source: Approach Auto Care x Slate Brand Identity (16.05.2025)
 *
 * COLOR PALETTE
 *   Headlight  #FF633A  — primary orange, CTAs, sidebar, topbar
 *   Chalk      #FBFBFB  — near-white, page backgrounds, cards
 *   Steel      #A7B0BA  — muted grey, secondary text, borders, dividers
 *   Carbon     #141414  — near-black, primary text, dark surfaces
 *
 * TYPOGRAPHY
 *   Headings   Saira Medium (500)        — all h1–h6, .font-heading
 *   Body       Titillium Web Light (300) — all body text, inputs, labels
 *
 * USAGE NOTES
 *   - Use Headlight sparingly: sidebar bg, topbar, primary buttons, active states, accent highlights
 *   - Carbon for high-contrast text on Chalk backgrounds
 *   - Steel for borders, placeholder text, secondary/supporting copy
 *   - Chalk as default page/card background (not pure white)
 *   - Never place gradient backgrounds behind text (brand guideline)
 *   - Images: close-up work shots, clean workshop spaces, natural/candid technician photos
 */

/* ─── CSS Custom Properties ─────────────────────────────────────── */
:root {
    /* Brand colors */
    --color-headlight:       #FF633A;
    --color-headlight-dark:  #E04E27;   /* hover / pressed state */
    --color-headlight-light: #FFE8E0;   /* tint for backgrounds */
    --color-chalk:           #FBFBFB;
    --color-steel:           #A7B0BA;
    --color-steel-light:     #D4D9DE;   /* lighter dividers */
    --color-carbon:          #141414;

    /* Semantic aliases */
    --color-primary:         var(--color-headlight);
    --color-primary-hover:   var(--color-headlight-dark);
    --color-primary-tint:    var(--color-headlight-light);
    --color-bg:              var(--color-chalk);
    --color-text:            var(--color-carbon);
    --color-muted:           var(--color-steel);
    --color-border:          var(--color-steel-light);

    /* Typography */
    --font-heading: 'Saira', sans-serif;
    --font-body:    'TitilliumWeb', sans-serif;

    /* Spacing scale (consistent across pages) */
    --page-padding: 1.5rem;   /* p-6 */
    --card-radius:  0.75rem;  /* rounded-xl */
    --card-shadow:  0 1px 4px rgba(20,20,20,.08);
}

/* ─── Font Faces ─────────────────────────────────────────────────── */
@font-face {
    font-family: 'Saira';
    src: url('../fonts/HEADING _ Saira-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'TitilliumWeb';
    src: url('../fonts/MAIN BODY _ TitilliumWeb-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

/* ─── Base Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Hide number input spinners site-wide */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--color-carbon);
    background-color: var(--color-chalk);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--font-heading);
    font-weight: 500;
}

/* ─── Brand Utility Classes ──────────────────────────────────────── */

/* Colors */
.text-headlight  { color: var(--color-headlight); }
.text-chalk      { color: var(--color-chalk); }
.text-steel      { color: var(--color-steel); }
.text-carbon     { color: var(--color-carbon); }
.bg-headlight    { background-color: var(--color-headlight); }
.bg-chalk        { background-color: var(--color-chalk); }
.bg-steel        { background-color: var(--color-steel); }
.bg-carbon       { background-color: var(--color-carbon); }
.bg-headlight-tint { background-color: var(--color-headlight-light); }

/* Borders */
.border-headlight { border-color: var(--color-headlight); }
.border-steel     { border-color: var(--color-steel-light); }

/* ─── Component Patterns ─────────────────────────────────────────── */

/* Card */
.brand-card {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 1.25rem 1.5rem;
}

/* Primary button */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--color-headlight);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-decoration: none;
}
.btn-primary:hover  { background-color: var(--color-headlight-dark); color: #fff; }
.btn-primary:active { background-color: var(--color-headlight-dark); }

/* Ghost / outline button */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: var(--color-headlight);
    font-family: var(--font-body);
    font-size: 0.875rem;
    border: 1px solid var(--color-headlight);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.btn-ghost:hover { background-color: var(--color-headlight-light); }

/* Form inputs */
.brand-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-carbon);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.brand-input:focus {
    border-color: var(--color-headlight);
    box-shadow: 0 0 0 3px var(--color-headlight-light);
}
.brand-input::placeholder { color: var(--color-steel); }

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}
.badge-primary { background: var(--color-headlight-light); color: var(--color-headlight-dark); }
.badge-steel   { background: #edf0f2; color: #4b5563; }
.badge-carbon  { background: var(--color-carbon); color: #fff; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }

/* Section heading */
.section-heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-carbon);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Divider */
.brand-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* Stat card */
.stat-card {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.stat-card__label {
    font-size: 0.75rem;
    color: var(--color-steel);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.stat-card__value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--color-carbon);
    line-height: 1;
}
.stat-card__sub {
    font-size: 0.75rem;
    color: var(--color-steel);
}

/* ─── Table Utilities ────────────────────────────────────────────── */
.brand-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.brand-table th {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-steel);
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.brand-table td {
    padding: 0.625rem 0.75rem;
    color: var(--color-carbon);
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}
.brand-table tbody tr:hover { background-color: #fafafa; }
.brand-table tbody tr:last-child td { border-bottom: none; }

/* ─── Tom Select (brand-aligned overrides) ───────────────────────── */
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-carbon);
    font-family: var(--font-body);
    box-shadow: none;
    cursor: text;
}
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.single.input-active.focus .ts-control {
    border-color: var(--color-headlight);
    box-shadow: 0 0 0 3px var(--color-headlight-light);
    outline: none;
}
.ts-dropdown {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    font-size: 0.875rem;
    font-family: var(--font-body);
    margin-top: 2px;
}
.ts-dropdown .option { padding: 0.5rem 0.75rem; color: var(--color-carbon); }
.ts-dropdown .option:hover,
.ts-dropdown .option.active  { background: var(--color-headlight-light); color: var(--color-headlight-dark); }
.ts-dropdown .option.selected { background: var(--color-headlight-light); color: var(--color-headlight-dark); font-weight: 600; }
.ts-dropdown-content { max-height: 220px; }
.ts-wrapper .ts-control .item { color: var(--color-carbon); }