/* CPRI Module 015 — Design Tokens (single source of truth).
   No hardcoded colours/sizes elsewhere; every surface references these vars.
   CarbonPlus identity: deep forest green primary, emerald/teal accent, slate text. */
:root {
  /* Brand + semantic colours */
  --brand-primary: #14532d;
  --brand-primary-hover: #0f3d22;
  --brand-primary-soft: #e7f0ea;
  --accent: #0d9488;
  --accent-hover: #0b7c72;
  --accent-soft: #d5f2ee;

  --background-page: #f6f7f5;
  --background-sidebar: #12351f;
  --background-sidebar-hover: #1c4a2c;
  --surface: #ffffff;
  --surface-subtle: #f2f4f1;
  --border: #e2e6e0;
  --border-strong: #c7cec4;

  --text-primary: #1f2a24;
  --text-secondary: #45514a;
  --text-muted: #6b756e;
  --text-on-brand: #f3f7f4;

  --success: #15803d;
  --success-soft: #dcfce7;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --information: #0369a1;
  --information-soft: #e0f2fe;
  --neutral: #57635b;
  --neutral-soft: #eceeea;

  --focus-ring: #0d9488;
  --overlay: rgba(18, 40, 28, 0.55);

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;  /* 28 */
  --fs-3xl: 2.25rem;  /* 36 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* Radius / shadow / motion */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(24, 40, 30, 0.06), 0 1px 3px rgba(24, 40, 30, 0.05);
  --shadow-md: 0 2px 6px rgba(24, 40, 30, 0.08), 0 4px 12px rgba(24, 40, 30, 0.06);
  --shadow-lg: 0 8px 24px rgba(24, 40, 30, 0.12);
  --transition-fast: 120ms ease;
  --transition: 180ms ease;

  /* Layout metrics */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 60px;
  --content-max: 1200px;
  --content-max-wide: 1440px;
  --field-height: 40px;
  --control-height: 38px;

  /* v1.0.1 — professional container + control scale (branding/layout polish).
     Distinct public/auth containers fix the previously over-narrow public page;
     the reading-width token is reserved for long-form prose, never the landing page. */
  --cpri-container-public: 1240px;
  --cpri-container-auth: 1120px;
  --cpri-container-app: var(--content-max-wide);
  --cpri-reading-width: 720px;
  --cpri-public-header-height: 72px;
  --cpri-control-height: 44px;   /* default professional control height */
  --cpri-control-height-lg: 48px; /* large primary CTA height */
  /* Public typography scale (larger, readable — never below ~14px for public copy) */
  --cpri-fs-body: 1.0625rem;  /* 17px */
  --cpri-fs-lead: 1.1875rem;  /* 19px */
  --cpri-fs-hero: 3.25rem;    /* 52px desktop headline */
  --cpri-fs-section: 2rem;    /* 32px section headings */
  --cpri-brand-logo-public: 44px;
  --cpri-brand-logo-login: 60px;
  --cpri-brand-logo-sidebar: 34px;
  --cpri-brand-logo-mobile: 32px;
  --cpri-brand-logo-footer: 30px;

  /* Breakpoints (reference; used in responsive.css) */
  --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1440px;

  /* Z-index layers */
  --z-base: 1; --z-sticky: 100; --z-sidebar: 200; --z-topbar: 210;
  --z-drawer: 300; --z-overlay: 290; --z-dialog: 400; --z-toast: 500;
}
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; --transition: 0ms; }
}