/*
 * VisaPics Design Tokens
 * Source spec: docs/superpowers/specs/2026-05-13-visapics-redesign-design.md
 * Sub-project 1: Design System foundation
 *
 * NOTE: Loaded BEFORE tailwind-built.css. Tailwind utilities win on
 * specificity, so existing pages keep their current look. New code
 * uses semantic tokens via Tailwind extend (see tailwind.config.js).
 */

:root {
  /* Surfaces */
  --surface: #FAFAF5;
  --surface-elevated: #FFFFFF;

  /* Ink (text) */
  --ink: #0F172A;
  --ink-muted: #475569;
  --ink-faint: #94A3B8;

  /* Borders */
  --border: #E7E5E0;
  --border-strong: #CBD5E1;

  /* Brand */
  --brand: #1E3A8A;
  --brand-hover: #1E40AF;
  --brand-soft: #EFF3FB;

  /* Accent (dosed warmth) */
  --accent: #C2410C;

  /* Semantic */
  --success: #047857;
  --warning: #B45309;
  --danger: #B91C1C;
  --danger-hover: #991B1B;

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* Shadows */
  --shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --shadow-card:   0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-lifted: 0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);

  /* Font families */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/*
 * @font-face declarations for self-hosted variable fonts.
 * Files are variable WOFF2 (see Task 3).
 */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/Fraunces.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono.woff2") format("woff2-variations");
  font-weight: 400 500;
  font-style: normal;
  font-display: optional;
}

/*
 * Tabular numbers for UI/table values.
 * Apply via .tnum class on cells with mixed numeric data.
 */
.tnum {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}