/* ============================================================================
   Veriroo — unified brand tokens (web), matched 1:1 to the mobile app.
   Source of truth: app src/theme-tokens.ts (green→blue "verify" identity,
   Playfair Display headings + DM Sans body, dark-premium with sharp corners).

   This file REPLACES the three competing palettes currently on the site
   (site.css :root purple/teal, design-tokens.css, editorial-theme.css gold).
   Load it FIRST/highest-priority so it wins. Dark is the default; light is an
   opt-in via html[data-theme="light"]. There is no Studio/Editorial split.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Type (was Editorial-only; now the single default) ---- */
  --vr-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --vr-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vr-weight-heading: 600;  /* PlayfairDisplay_600SemiBold */
  --vr-weight-body: 400;

  /* ---- Brand (green → blue "verify" sweep) ---- */
  --vr-brand-lime: #A4C83C;
  --vr-brand-green: #3DAE4E;
  --vr-brand-blue: #1C6FA8;
  --vr-gradient-brand: linear-gradient(135deg, #A4C83C 0%, #3DAE4E 45%, #1C6FA8 100%);
  --vr-gradient-brand-soft: linear-gradient(135deg, #7BC86A 0%, #2E9E4F 100%);

  /* ---- Radius (app = sharp corners) ---- */
  --vr-radius-sm: 3px;
  --vr-radius-md: 5px;
  --vr-radius-lg: 8px;
  --vr-radius-xl: 10px;
  --vr-radius-pill: 999px;
  --vr-btn-radius: 6px;

  /* ---- Spacing scale (app spacing) ---- */
  --vr-space-xs: 4px;
  --vr-space-sm: 8px;
  --vr-space-md: 16px;
  --vr-space-lg: 24px;
  --vr-space-xl: 32px;
  --vr-space-xxl: 48px;

  /* ========================================================================
     DARK = DEFAULT  (app darkPalette)
     ======================================================================== */
  --vr-bg: #0D1411;
  --vr-bg-elevated: #121A16;
  --vr-card: #16201B;
  --vr-surface: #16201B;
  --vr-surface-alt: #1F2A23;
  --vr-border: #26322B;

  --vr-text: #EAF2EC;
  --vr-text-muted: #93A39A;
  --vr-text-faint: #62716A;

  --vr-primary: #46BD62;          /* green, brightened for dark */
  --vr-primary-hover: #3DAE4E;
  --vr-on-primary: #06130A;
  --vr-accent: #52A6E6;           /* blue */
  --vr-accent-hover: #1C6FA8;

  --vr-success: #5FC57C;
  --vr-warning: #E0A23C;
  --vr-danger: #E05252;

  /* Trust-tier colours (mirror the app badges) */
  --vr-trust-verified: #5FC57C;   /* green — Full provenance / Verified */
  --vr-trust-self: #E0A23C;       /* amber — Self-certified */
  --vr-trust-alert: #E05252;      /* red — Stolen / issue */

  --vr-tab-bar: #121A16;
  color-scheme: dark;
}

/* ========================================================================
   LIGHT = opt-in  (app lightPalette)
   ======================================================================== */
html[data-theme="light"] {
  --vr-bg: #F4F8F5;
  --vr-bg-elevated: #FBFDFB;
  --vr-card: #FFFFFF;
  --vr-surface: #FFFFFF;
  --vr-surface-alt: #E8F1EB;
  --vr-border: #D8E6DD;

  --vr-text: #13241A;
  --vr-text-muted: #566B5E;
  --vr-text-faint: #8A988F;

  --vr-primary: #2E9E4F;
  --vr-primary-hover: #257F40;
  --vr-on-primary: #FFFFFF;
  --vr-accent: #1C6FA8;
  --vr-accent-hover: #15577F;

  --vr-success: #1E8E3E;
  --vr-warning: #C07A12;
  --vr-danger: #C0392B;

  --vr-trust-verified: #1E8E3E;
  --vr-trust-self: #C07A12;
  --vr-trust-alert: #C0392B;

  --vr-tab-bar: #FBFDFB;
  color-scheme: light;
}

/* ============================================================================
   Baseline application of the tokens. (Replace the old site.css body gradient —
   no more purple/teal radial glows; flat brand surface.)
   ============================================================================ */
body {
  background: var(--vr-bg);
  color: var(--vr-text);
  font-family: var(--vr-font-body);
  font-weight: var(--vr-weight-body);
}

h1, h2, h3, h4, .vr-display {
  font-family: var(--vr-font-heading);
  font-weight: var(--vr-weight-heading);
  color: var(--vr-text);
}

/* Primary action = the brand sweep (matches the app's gradient buttons/logo). */
.vr-btn {
  background: var(--vr-gradient-brand);
  color: var(--vr-on-primary);
  border: none;
  border-radius: var(--vr-btn-radius);
  font-family: var(--vr-font-body);
  font-weight: 600;
}
.vr-btn:hover { filter: brightness(1.05); }

.vr-btn-secondary {
  background: transparent;
  color: var(--vr-text);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-btn-radius);
}
.vr-btn-secondary:hover { border-color: var(--vr-primary); color: var(--vr-primary); }

.vr-card,
.vr-surface {
  background: var(--vr-card);
  border: 1px solid var(--vr-border);
  border-radius: var(--vr-radius-lg);
}

/* ============================================================================
   Header logo — Veriroo wordmark (desktop) + compact mark (mobile).
   The gradient wordmark reads on both dark and light, so one asset covers both.
   ============================================================================ */
.vr-logo--img { display: inline-flex; align-items: center; line-height: 0; }
.vr-logo-img { height: 30px; width: auto; display: block; }
.vr-logo-mark { height: 32px; width: auto; display: none; }
@media (max-width: 768px) {
  .vr-logo-img { display: none; }
  .vr-logo-mark { display: block; }
}

/* Account-menu scroll fix lives in site.css on the canonical .vr-avatar-dropdown
   rule (site.css is loaded everywhere; this file isn't). Kept there to avoid a
   duplicate, lower-specificity override here. */