/*
 * Yclas design system tokens (https://claude.ai/artifact/DNbatdacswrhbmBso9nygd), October 2026.
 * One place for the new look: pages built in it use these variables, never the raw values. Prefixed --yc- so they
 * can't collide with the old Bootstrap/Tailwind styles still loaded on yclas.com. Light theme only for now.
 * Fonts: Bricolage Grotesque (display) and Geist (body) from Google Fonts, loaded by the page.
 */
:root {
  --yc-ground: #FAFAFC;
  --yc-surface: #FFFFFF;
  --yc-panel: #F2F4F8;
  --yc-line: #E7E9EE;
  --yc-line-strong: #9AA3B0;
  --yc-ink: #0E1116;
  --yc-ink-muted: #5B6472;
  --yc-ink-faint: #8A93A1;
  --yc-accent: #2B59F0;
  --yc-accent-hover: #1D3FBF;
  --yc-accent-soft: #EEF2FF;
  --yc-on-accent: #FFFFFF;
  --yc-hero: #0E1116;
  --yc-on-hero: #FFFFFF;
  --yc-on-hero-muted: #C3CAD6;
  --yc-success: #157347;
  --yc-success-soft: #E7F4EC;
  --yc-warning: #A15C07;
  --yc-warning-soft: #FDF3E3;
  --yc-danger: #C0262D;
  --yc-danger-soft: #FDECEC;
  --yc-brand-logo: #4A7CB0; /* the logo files only, never UI */

  --yc-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --yc-font-body: Geist, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;

  --yc-space-1: 4px;
  --yc-space-2: 8px;
  --yc-space-3: 12px;
  --yc-space-4: 16px;
  --yc-space-5: 20px;
  --yc-space-6: 24px;
  --yc-space-8: 32px;
  --yc-space-10: 40px;
  --yc-space-16: 64px;

  --yc-radius-sm: 8px;
  --yc-radius-md: 12px;
  --yc-radius-lg: 16px;
  --yc-radius-xl: 24px;
  --yc-radius-pill: 999px;

  --yc-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --yc-shadow-md: 0 1px 2px rgba(16, 24, 40, 0.06), 0 16px 40px rgba(16, 24, 40, 0.10);
  --yc-shadow-accent: 0 1px 2px rgba(16, 24, 40, 0.12), 0 6px 16px rgba(43, 89, 240, 0.28);
  --yc-ring-focus: 0 0 0 4px rgba(43, 89, 240, 0.16);
}