/* =========================================
   Academico.Digital identity: design tokens (light + dark).
   Forked from livepasses' tokens.css (--lp-* became --ad-*). Every brand value lives here and only
   here: the other stylesheets use these variables and no literal colour. web/packages/ui copies the
   same names and values (spec §7 of the identity design).
   ========================================= */

/* Fonts, served by identity itself (I-12). OFL licences in /fonts. */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 400; src: url("/fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 500; src: url("/fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 600; src: url("/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 700; src: url("/fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 800; src: url("/fonts/manrope-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 600; src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Type families */
  --ad-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ad-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ad-font-display: var(--ad-font-sans);
  --ad-font-body: var(--ad-font-sans);

  /* Brand */
  --ad-accent: #2563eb;
  --ad-accent-ink: #ffffff;
  --ad-accent-soft: color-mix(in oklab, var(--ad-accent) 12%, transparent);
  --ad-accent-hover: color-mix(in oklab, var(--ad-accent) 88%, black);

  /* The dark header and brand panel, the same in both themes */
  --ad-hero-bg: #0a0e1a;
  --ad-hero-bg-end: #1a1d2a;
  --ad-hero-accent: #60a5fa;
  --ad-on-hero: #ffffff;
  --ad-on-hero-soft: color-mix(in oklab, var(--ad-on-hero) 72%, transparent);
  --ad-on-hero-line: color-mix(in oklab, var(--ad-on-hero) 14%, transparent);
  --ad-on-hero-hover: color-mix(in oklab, var(--ad-on-hero) 9%, transparent);
  --ad-hero-grid: color-mix(in oklab, var(--ad-on-hero) 4%, transparent);

  /* Light theme (default) */
  --ad-bg: #ffffff;
  --ad-bg-soft: #f6f8fb;
  --ad-bg-sunken: #eef1f6;
  --ad-ink: #0a0e1a;
  --ad-ink-soft: #3b4252;
  --ad-muted: #6b7280;
  --ad-line: #e6e9ef;
  --ad-line-strong: #c9d0db;
  --ad-card: #ffffff;
  --ad-input-bg: #ffffff;
  --ad-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --ad-shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
  --ad-shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.25), 0 8px 24px -12px rgba(15, 23, 42, 0.1);

  /* Radii */
  --ad-radius-xs: 6px;
  --ad-radius-sm: 10px;
  --ad-radius-md: 14px;
  --ad-radius-lg: 20px;
  --ad-radius-xl: 28px;

  /* Status (text-safe: AA on --ad-bg) */
  --ad-success: #047857;
  --ad-warning: #b45309;
  --ad-error: #dc2626;
  --ad-info: #0369a1;

  /* Focus ring */
  --ad-focus: var(--ad-accent);

  /* The TOTP QR code: dark on light in both themes, so every scanner reads it. Not redefined below. */
  --ad-qr-ink: #0a0e1a;
  --ad-qr-paper: #ffffff;

  /* Google's "G" on the sign-in button, in Google's brand colours. Not redefined below. */
  --ad-google-blue: #4285f4;
  --ad-google-green: #34a853;
  --ad-google-yellow: #fbbc05;
  --ad-google-red: #ea4335;
}

/* Dark theme: chosen with the toggle (theme.js sets data-theme), or by the system when nothing is
   stored or JavaScript is off. The two blocks must stay identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ad-bg: #07090f;
  --ad-bg-soft: #0e1119;
  --ad-bg-sunken: #14171f;
  --ad-ink: #f5f7fb;
  --ad-ink-soft: #c5cad6;
  --ad-muted: #8b95a8;
  --ad-line: #1c2030;
  --ad-line-strong: #2a3045;
  --ad-card: #11141d;
  --ad-input-bg: #11141d;
  /* Lighter accent on dark surfaces, with dark text on it for contrast. */
  --ad-accent: #60a5fa;
  --ad-accent-ink: #07090f;
  --ad-accent-hover: color-mix(in oklab, var(--ad-accent) 88%, white);
  --ad-success: #34d399;
  --ad-warning: #fbbf24;
  --ad-error: #f87171;
  --ad-info: #38bdf8;
  --ad-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ad-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --ad-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ad-bg: #07090f;
    --ad-bg-soft: #0e1119;
    --ad-bg-sunken: #14171f;
    --ad-ink: #f5f7fb;
    --ad-ink-soft: #c5cad6;
    --ad-muted: #8b95a8;
    --ad-line: #1c2030;
    --ad-line-strong: #2a3045;
    --ad-card: #11141d;
    --ad-input-bg: #11141d;
    --ad-accent: #60a5fa;
    --ad-accent-ink: #07090f;
    --ad-accent-hover: color-mix(in oklab, var(--ad-accent) 88%, white);
    --ad-success: #34d399;
    --ad-warning: #fbbf24;
    --ad-error: #f87171;
    --ad-info: #38bdf8;
    --ad-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ad-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
    --ad-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  }
}