/* ============================================================
   CERTIFITRAX BRAND TOKENS
   ============================================================
   Single source of truth for the CertifiTrax visual identity.
   Change these values and the entire site updates.

   Brand Identity: Authority. Achievement. Trust.
   Color Story: Forest green (growth, credentials) + Gold (achievement, seals)
   Typography: DM Sans (modern geometric, professional warmth)
   ============================================================ */

:root {
  /* ---- PRIMARY BRAND ---- */
  --brand-primary: #1a5c3a;           /* Forest green -- trust, credentialing */
  --brand-primary-dark: #0f3d26;      /* Deep forest -- headers, emphasis */
  --brand-primary-light: #2a7a50;     /* Lighter green -- hover states */
  --brand-primary-pale: #e8f5ee;      /* Green wash -- subtle backgrounds */
  --brand-primary-rgb: 26, 92, 58;    /* For rgba() usage */

  /* ---- ACCENT (ACHIEVEMENT) ---- */
  --brand-accent: #b8860b;            /* Dark goldenrod -- achievement, seals */
  --brand-accent-dark: #8b6508;       /* Deep gold -- hover */
  --brand-accent-light: #d4a017;      /* Warm gold -- highlights */
  --brand-accent-pale: #fdf6e3;       /* Gold wash -- subtle backgrounds */
  --brand-accent-rgb: 184, 134, 11;   /* For rgba() usage */

  /* ---- NEUTRALS ---- */
  --neutral-950: #0c1015;             /* Near-black */
  --neutral-900: #141a1f;             /* Dark background */
  --neutral-800: #1e272e;             /* Card dark */
  --neutral-700: #2d3940;             /* Secondary dark */
  --neutral-600: #4a5568;             /* Muted text */
  --neutral-500: #64748b;             /* Body secondary */
  --neutral-400: #94a3b8;             /* Placeholder */
  --neutral-300: #cbd5e1;             /* Borders */
  --neutral-200: #e2e8f0;             /* Light borders */
  --neutral-100: #f1f5f9;             /* Light backgrounds */
  --neutral-50: #f8faf9;              /* Page background */
  --neutral-white: #ffffff;

  /* ---- SEMANTIC ---- */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #0284c7;

  /* ---- TEXT ---- */
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-on-dark: var(--neutral-white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);
  --text-on-dark-faint: rgba(255, 255, 255, 0.5);
  --text-on-primary: var(--neutral-white);

  /* ---- SURFACES ---- */
  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-white);
  --surface-elevated: var(--neutral-white);
  --surface-dark: var(--neutral-900);
  --surface-dark-card: rgba(255, 255, 255, 0.05);
  --surface-dark-card-hover: rgba(255, 255, 255, 0.08);
  --surface-dark-border: rgba(255, 255, 255, 0.1);
  --surface-muted: var(--neutral-100);

  /* ---- BORDERS ---- */
  --border-default: var(--neutral-200);
  --border-hover: var(--brand-primary);
  --border-focus: var(--brand-primary);

  /* ---- TYPOGRAPHY ---- */
  --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.85rem;     /* ~14px */
  --font-size-base: 0.95rem;   /* ~15px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 2rem;       /* 32px */
  --font-size-4xl: 2.75rem;    /* 44px */
  --font-size-hero: clamp(2.5rem, 5vw, 4rem);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* ---- SPACING ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --section-padding: 96px;

  /* ---- RADIUS ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 100px;

  /* ---- SHADOWS ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* ---- TRANSITIONS ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ---- LAYOUT ---- */
  --container-max: 1200px;
  --nav-height: 64px;
}

/* ---- DARK SECTION OVERRIDES ---- */
/* Apply to sections with dark backgrounds (hero, capabilities, builder demo) */
.theme-dark {
  --text-primary: var(--neutral-white);
  --text-secondary: var(--text-on-dark-muted);
  --text-muted: var(--text-on-dark-faint);
  --surface-card: var(--surface-dark-card);
  --border-default: var(--surface-dark-border);
}