/*
 * Design tokens — type scale, spacing, radius, elevation and component
 * shapes, adapted from a reference design system while keeping this app's
 * own accent color.
 *
 * --cor-fundo / --cor-fundo-secundaria / --cor-destaque stay exactly as
 * they are today: admin-configurable custom properties, set inline per
 * request from Settings (see Configurações > Aparência). Everything below
 * derives FROM --cor-destaque using color-mix() instead of hardcoding a
 * hex, so the tonal scale stays correct whatever accent color an admin
 * picks — not just the one in place when this file was written.
 *
 * Included directly (no build step), same as app.css.
 */

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

:root {
    /* Radius scale */
    --bs-border-radius-sm: 4px;
    --bs-border-radius: 8px;
    --bs-border-radius-lg: 12px;
    --bs-border-radius-xl: 16px;
    --bs-border-radius-xxl: 48px;
    --bs-border-radius-2xl: 48px;
    --radius-xs: 2px;

    /* Spacing (8px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-xxl: 24px;
    --space-huge: 28px;

    /* Elevation */
    --elevation-1: 0 5px 20px 0 rgba(0, 0, 0, .10);
    --elevation-2: 0 0 32px 0 rgba(0, 0, 0, .10);
    --elevation-3: 0 1px 10px 0 rgba(0, 0, 0, .20);
    --bs-box-shadow-sm: var(--elevation-1);
    --bs-box-shadow: var(--elevation-2);
    --bs-box-shadow-lg: var(--elevation-3);

    /* Neutrals */
    --color-ink: #1d1d1d;
    --color-ink-mute: #696969;
    --color-canvas-cream: #f4ede4;
    --color-hairline: #e6e6e6;

    /* Semantic — kept as this app's existing Bootstrap defaults */
    --color-success: #198754;
    --color-error: #dc3545;

    /* Link — kept as this app's existing (Bootstrap default) treatment.
       See note in PR description: the reference system's link blue sits too
       close to this app's accent to keep both, so the accent wins and the
       link keeps its own lane. */
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;

    /* Accent-derived tonal scale, computed FROM --cor-destaque */
    --on-accent: #ffffff;
    --accent-press: color-mix(in oklch, var(--cor-destaque), white 15%);
    --accent-deep: color-mix(in oklch, var(--cor-destaque), black 12%);
    --accent-tint: color-mix(in oklch, var(--cor-destaque), white 10%);
    --accent-soft: color-mix(in oklch, var(--cor-destaque), white 88%);
    --on-accent-mute: color-mix(in oklch, var(--cor-destaque) 45%, white 55%);

    /* Typography + body */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: var(--color-ink);
    --bs-body-line-height: 1.55;
}

/* Cards: reference system's card geometry (16px radius, 32px padding),
   soft resting elevation instead of a hairline border. */
.card {
    --bs-card-border-radius: var(--bs-border-radius-xl);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-xl) - var(--bs-border-width));
    --bs-card-spacer-y: 2rem;
    --bs-card-spacer-x: 2rem;
    --bs-card-box-shadow: var(--elevation-1);
}

/* Buttons: pill shape for every button in the app, comfortable padding,
   bold label. Declared on .btn itself (not :root) because Bootstrap's own
   .btn / .btn-lg / .btn-sm rules redeclare these same custom properties
   locally — an override only reaches them from a rule of matching
   specificity that appears later in the cascade, which this is. */
.btn {
    --bs-btn-border-radius: var(--bs-border-radius-pill);
    --bs-btn-font-weight: 700;
    --bs-btn-padding-y: 0.875rem;
    --bs-btn-padding-x: 1.75rem;
    letter-spacing: 0.0125em;
}

.btn-sm {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1.25rem;
}

/* Form fields: reference system's text-input radius (4px). */
.form-control,
.form-select,
.form-control-color {
    border-radius: var(--bs-border-radius-sm);
}

/* Focus ring tracks the accent instead of Bootstrap's baked-in blue —
   Bootstrap hardcodes literal hex/rgba here rather than exposing a
   variable, so it has to be re-declared rather than tokenized. */
.form-control:focus,
.form-select:focus {
    border-color: var(--accent-tint);
    box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--cor-destaque) 25%, transparent);
}

/* Type scale — display tiers carry the tight negative tracking that
   gives the reference system its editorial density; body defaults to
   1.55 leading via --bs-body-line-height above. */
.type-display-xxl { font-weight: 700; font-size: 64px; line-height: 1.12; letter-spacing: -0.768px; }
.type-display-xl  { font-weight: 600; font-size: 58px; line-height: 1.25; letter-spacing: -0.464px; }
.type-display-lg  { font-weight: 700; font-size: 50px; line-height: 1.12; letter-spacing: -0.6px; }
.type-display-md  { font-weight: 700; font-size: 32px; line-height: 1.25; letter-spacing: -0.256px; }
.type-heading-lg  { font-weight: 700; font-size: 24px; line-height: 1.33; letter-spacing: -0.096px; }
.type-heading-md  { font-weight: 600; font-size: 22px; line-height: 1.4; }
.type-heading-sm  { font-weight: 600; font-size: 18px; line-height: 1.56; letter-spacing: -0.0216px; }
.type-body-lg     { font-size: 18px; line-height: 1.55; letter-spacing: -0.0216px; }
.type-caption     { font-size: 14px; line-height: 1.43; letter-spacing: 0.1px; color: var(--color-ink-mute); }
.type-micro-cap   { font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: 0.96px; text-transform: uppercase; }

@media (max-width: 767.98px) {
    .type-display-xxl { font-size: 40px; letter-spacing: -0.4px; }
}

/* Stat callout numeral — large accent-colored figure on white, per the
   reference system's card-stat treatment. */
.stat-number {
    font-weight: 700;
    font-size: 50px;
    line-height: 1.12;
    letter-spacing: -0.6px;
    color: var(--cor-destaque);
}

/* All-caps eyebrow pill on a cream backdrop, per pill-cap-shade. */
.pill-cap-shade {
    display: inline-block;
    background-color: var(--color-canvas-cream);
    color: var(--color-ink);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: var(--bs-border-radius-pill);
}

/* Soft accent-tinted surface, for callouts/highlights that were
   previously a hardcoded unrelated blue (e.g. protocol/password panels,
   the reporter's chat bubble, the identification segmented control). */
.bg-accent-soft {
    background-color: var(--accent-soft) !important;
}