/* Local layer over the vendored FPFtech token export.
 *
 * tokens.fpf.css is the institution's artefact and is never edited. This file
 * adds exactly two things it cannot provide:
 *
 * 1. An *explicitly chosen* theme. The export flips on
 *    `prefers-color-scheme` and offers `.fpf-dark` to force dark - but nothing
 *    to force light when the system is dark, which a theme toggle needs. The
 *    two blocks below are generated from the export (see
 *    tests/ui/test_design_system.py, which fails if they drift) and win by
 *    load order.
 *
 * 2. Values the export does not carry: the sidebar's fixed dark surface, and
 *    shadows. Prefixed `--app-` so they can never be mistaken for
 *    institutional tokens.
 */

/* Forced light — generated from the export's :root. */
[data-theme="light"] {
  --fpf-bg-base: #FFFFFF;
  --fpf-bg-subtle: #F4F4F4;
  --fpf-bg-muted: #EAEAEA;
  --fpf-bg-elevated: #FFFFFF;
  --fpf-surface-default: #FFFFFF;
  --fpf-surface-raised: #FFFFFF;
  --fpf-surface-sunken: #F4F4F4;
  --fpf-border-default: #DFDEDE;
  --fpf-border-strong: #C8C8C8;
  --fpf-border-focus: #B3C50E;
  --fpf-content-primary: #383839;
  --fpf-content-secondary: #4A4A4B;
  --fpf-content-tertiary: #8C8C8C;
  --fpf-content-disabled: #A0A0A0;
  --fpf-content-inverse: #FFFFFF;
  --fpf-link-default: #7A8A09;
  --fpf-interactive-primary-default: #B3C50E;
  --fpf-interactive-primary-hover: #8FA00B;
  --fpf-interactive-primary-active: #7A8A09;
  --fpf-interactive-primary-subtle: #EEF3C0;
  --fpf-interactive-primary-on: #383839;
  --fpf-interactive-secondary-default: #383839;
  --fpf-interactive-secondary-hover: #474647;
  --fpf-interactive-secondary-on: #FFFFFF;
  --fpf-interactive-accent-default: #34AE53;
  --fpf-interactive-accent-hover: #28924A;
  --fpf-interactive-accent-subtle: rgba(52,174,83,0.10);
  --fpf-interactive-accent-on: #FFFFFF;
  --fpf-status-success-bg: rgba(52,174,83,0.10);
  --fpf-status-success-border: rgba(52,174,83,0.30);
  --fpf-status-success-content: #1E7A3A;
  --fpf-status-success-solid: #34AE53;
  --fpf-status-warning-bg: rgba(229,160,32,0.10);
  --fpf-status-warning-border: rgba(229,160,32,0.30);
  --fpf-status-warning-content: #C8860A;
  --fpf-status-warning-solid: #E5A020;
  --fpf-status-danger-bg: rgba(217,64,64,0.10);
  --fpf-status-danger-border: rgba(217,64,64,0.25);
  --fpf-status-danger-content: #B83535;
  --fpf-status-danger-solid: #D94040;
  --fpf-status-info-bg: rgba(45,143,212,0.10);
  --fpf-status-info-border: rgba(45,143,212,0.25);
  --fpf-status-info-content: #1666A0;
  --fpf-status-info-solid: #2D8FD4;
  --fpf-font-family: DM Sans;
  --fpf-font-size-xs: 10px;
  --fpf-font-size-sm: 12px;
  --fpf-font-size-md: 14px;
  --fpf-font-size-base: 16px;
  --fpf-font-size-lg: 18px;
  --fpf-font-size-xl: 22px;
  --fpf-font-size-2xl: 28px;
  --fpf-font-size-3xl: 36px;
  --fpf-font-size-4xl: 48px;
  --fpf-font-weight-regular: 400;
  --fpf-font-weight-medium: 500;
  --fpf-font-weight-semibold: 600;
  --fpf-font-weight-bold: 700;
  --fpf-font-weight-extrabold: 800;
  --fpf-font-weight-black: 900;
  --fpf-lineHeight-tight: 1.1;
  --fpf-lineHeight-normal: 1.5;
  --fpf-lineHeight-relaxed: 1.65;
  --fpf-letterSpacing-tight: -0.03em;
  --fpf-letterSpacing-normal: 0em;
  --fpf-letterSpacing-wider: 0.08em;
  --fpf-letterSpacing-widest: 0.18em;
  --fpf-space-1: 4px;
  --fpf-space-2: 8px;
  --fpf-space-3: 12px;
  --fpf-space-4: 16px;
  --fpf-space-5: 20px;
  --fpf-space-6: 24px;
  --fpf-space-8: 32px;
  --fpf-space-12: 48px;
  --fpf-space-16: 64px;
  --fpf-radius-xs: 4px;
  --fpf-radius-sm: 6px;
  --fpf-radius-md: 10px;
  --fpf-radius-lg: 16px;
  --fpf-radius-xl: 24px;
  --fpf-radius-2xl: 32px;
  --fpf-radius-full: 9999px;
}

/* Forced dark — generated from the export's .fpf-dark. */
[data-theme="dark"] {
  --fpf-bg-base: #222223;
  --fpf-bg-subtle: #383839;
  --fpf-bg-muted: rgba(255,255,255,0.05);
  --fpf-bg-elevated: #383839;
  --fpf-surface-default: #1E1E1F;
  --fpf-surface-raised: #2A2A2B;
  --fpf-surface-sunken: rgba(0,0,0,0.20);
  --fpf-border-default: rgba(255,255,255,0.10);
  --fpf-border-strong: rgba(255,255,255,0.18);
  --fpf-border-focus: #B3C50E;
  --fpf-content-primary: rgba(255,255,255,0.95);
  --fpf-content-secondary: rgba(255,255,255,0.65);
  --fpf-content-tertiary: rgba(255,255,255,0.40);
  --fpf-content-disabled: rgba(255,255,255,0.25);
  --fpf-content-inverse: #222223;
  --fpf-link-default: #C4D218;
  --fpf-interactive-primary-default: #B3C50E;
  --fpf-interactive-primary-hover: #C4D218;
  --fpf-interactive-primary-active: #D4E038;
  --fpf-interactive-primary-subtle: rgba(179,197,14,0.15);
  --fpf-interactive-primary-on: #222223;
  --fpf-interactive-secondary-default: rgba(255,255,255,0.12);
  --fpf-interactive-secondary-hover: rgba(255,255,255,0.18);
  --fpf-interactive-secondary-on: rgba(255,255,255,0.95);
  --fpf-interactive-accent-default: #50C96C;
  --fpf-interactive-accent-hover: #34AE53;
  --fpf-interactive-accent-subtle: rgba(52,174,83,0.15);
  --fpf-interactive-accent-on: #222223;
  --fpf-status-success-bg: rgba(52,174,83,0.15);
  --fpf-status-success-border: rgba(52,174,83,0.30);
  --fpf-status-success-content: #50C96C;
  --fpf-status-success-solid: #34AE53;
  --fpf-status-warning-bg: rgba(229,160,32,0.15);
  --fpf-status-warning-border: rgba(229,160,32,0.30);
  --fpf-status-warning-content: #FFBA42;
  --fpf-status-warning-solid: #E5A020;
  --fpf-status-danger-bg: rgba(217,64,64,0.15);
  --fpf-status-danger-border: rgba(217,64,64,0.30);
  --fpf-status-danger-content: #E85555;
  --fpf-status-danger-solid: #D94040;
  --fpf-status-info-bg: rgba(45,143,212,0.15);
  --fpf-status-info-border: rgba(45,143,212,0.30);
  --fpf-status-info-content: #52AAEA;
  --fpf-status-info-solid: #2D8FD4;
}

/* ---------- Local additions, not institutional ---------- */
:root {
  /* The export gives the family name alone; a web app needs a fallback stack,
     and DM Sans is not vendored (005 T520). */
  --app-font-family: var(--fpf-font-family), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The catalog names no shadow token, though `card` asks for a "sombra leve
     por hierarquia" and the collapsed sidebar's tooltip has one. */
  --app-shadow-raised: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 4%);
  --app-shadow-overlay: 0 8px 32px rgb(0 0 0 / 45%);

  /* The shipped sidebar is dark in *both* themes and its surface is in no
     token: #383839 light, #141415 dark. Read from the rendered component. */
  --app-nav-surface: #383839;
  --app-nav-content: rgb(255 255 255 / 65%);
  --app-nav-content-strong: #ffffff;
  --app-nav-content-dim: rgb(255 255 255 / 50%);
  --app-nav-content-faint: rgb(255 255 255 / 35%);
  --app-nav-content-ghost: rgb(255 255 255 / 30%);
  --app-nav-hover: rgb(255 255 255 / 6%);
  --app-nav-hover-strong: rgb(255 255 255 / 12%);
  --app-nav-divider: rgb(255 255 255 / 10%);
  --app-nav-tooltip-surface: #2a2a2b;
  --app-nav-tooltip-content: #ffffff;
}

[data-theme="dark"],
.fpf-dark {
  --app-nav-surface: #141415;
  --app-shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-nav-surface: #141415;
    --app-shadow-raised: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 30%);
  }
}