/*
 * tokens.css — single source of truth for the web layer.
 * Mirrors RichardSC/Core/Theme.swift. Change brand values here once.
 */
:root {
  /* Brand palette (Theme.Palette) */
  --emerald: #004D2C;
  --emerald-bright: #0A7A47;
  --gold: #E5A93B;
  --gold-bright: #F4C76B;
  --canvas: #08090A;
  --canvas-elevated: #121417;

  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --specular-border: rgba(255, 255, 255, 0.12);

  /* Geometry (Theme.Radius) */
  --radius-card: 22px;
  --radius-control: 16px;
  --radius-pill: 999px;

  /* Spacing (Theme.Spacing) */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Glow (Theme.Glow) */
  --glow-gold: rgba(229, 169, 59, 0.45);
  --glow-emerald: rgba(10, 122, 71, 0.5);

  /* Glass surface */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-blur: 18px;

  /* Typography — SF Pro Display + SF Mono via system stack (matches .system design) */
  --font-display: -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
}

/* Full-screen emerald backdrop with gold vignette — mirrors Theme.backgroundGradient */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(480px circle at 50% 0%, rgba(10, 122, 71, 0.30), transparent 70%),
    radial-gradient(460px circle at 100% 100%, rgba(229, 169, 59, 0.12), transparent 70%),
    linear-gradient(180deg, #0B3D29 0%, #07241A 45%, var(--canvas) 100%);
}

/* Reusable glassmorphism surface — mirrors .glassSurface modifier */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--specular-border);
  border-radius: var(--radius-card);
}