/**
 * public/css/tokens.css — Canovate design system tokens.
 * Load this BEFORE component styles in every page.
 * All values reference brand guidelines §1.
 */

/* ── Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display&display=swap');

/* ── Color Tokens ────────────────────────────────────────── */

/* Dark surface tokens (dark bg pages) */
:root {
  /* Backgrounds */
  --color-bg-primary: #0B2B1D;    /* Deep Forest — main page bg */
  --color-bg-card: rgba(255, 255, 255, 0.05);   /* Card bg on dark surfaces */
  --color-bg-input: #0B2B1D;       /* Input bg (dark bg pages) */

  /* Borders */
  --color-border: rgba(245, 240, 232, 0.08);     /* Card borders on dark */
  --color-border-strong: rgba(245, 240, 232, 0.15); /* Input / hover borders */

  /* Text */
  --color-text-primary: #F5F0E8;  /* Warm Cream — primary text on dark */
  --color-text-secondary: #7A8478; /* Stone — secondary/muted text */
  --color-text-inverse: #0B2B1D;  /* Deep Forest — text on light surfaces */

  /* CTAs */
  --color-cta: #1B5E3B;           /* Canna Green — primary CTA bg */
  --color-cta-hover: #2E8B57;      /* Fresh Leaf — CTA hover */
  --color-cta-text: #F5F0E8;      /* White text on CTA */

  /* Accent */
  --color-accent: #C8860A;        /* Amber Gold — highlights, badges */

  /* Status */
  --color-success: #2E8B57;       /* Fresh Leaf — approved / sent */
  --color-success-bg: rgba(46, 139, 87, 0.12);
  --color-warning: #C8860A;      /* Amber Gold — pending */
  --color-warning-bg: rgba(200, 134, 10, 0.12);
  --color-error: #B91C1C;         /* Error red */
  --color-error-bg: rgba(185, 28, 28, 0.12);
  --color-error-border: rgba(185, 28, 28, 0.3);

  /* Lime (brand hero accent — use sparingly, not as primary CTA bg) */
  --color-brand-accent: #C8F240;
  --color-brand-accent-dim: rgba(200, 242, 64, 0.10);
  --color-brand-accent-border: rgba(200, 242, 64, 0.15);

  /* ── Typography ─────────────────────────────────────────── */
  --font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease-out;

  /* ── Shadows (light surfaces only — on dark, use borders) ─ */
  --shadow-card-light: 0 2px 8px rgba(11, 43, 29, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(11, 43, 29, 0.12);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.3);
}