/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — NepalConnect Steep/Readdy Visual System
   Terracotta Accent (#C25E26 / #B85D19) · Dark Espresso Sidebar (#171412)
   Warm Oat Canvas (#FAF7F2) · Pine Green (#1B4D3E)
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Core Colors ──────────────────────────────────────────────────────── */
  --color-primary: #C25E26;              /* Warm Terracotta Orange — primary CTAs & active nav fill */
  --color-primary-hover: #A74E1B;
  --color-primary-active: #8E3E12;
  --color-primary-tint: #FDF4ED;
  --color-primary-glow: rgba(194, 94, 38, 0.25);

  --color-terracotta: #C25E26;
  --color-terracotta-dark: #A74E1B;
  --color-terracotta-light: #FDF4ED;

  --color-pine: #1B4D3E;                /* Dark Forest / Pine Green — "Talk with Us" launcher & uptime */
  --color-pine-hover: #143D31;
  --color-pine-light: #E8F5EE;

  /* Sidebar Dark Palette */
  --color-sidebar-bg: #171412;          /* Deep espresso charcoal */
  --color-sidebar-border: #26211E;
  --color-sidebar-text: #A8A29E;
  --color-sidebar-text-muted: #78716C;
  --color-sidebar-hover: #26211E;
  --color-sidebar-active: #C25E26;

  /* Neutral Canvas & Surface Scale */
  --color-bg: #FAF7F2;                  /* Warm Oat Cream page canvas */
  --color-canvas: #FAF7F2;
  --color-surface: #FFFFFF;             /* Crisp white cards */
  --color-surface-elevated: #FFFFFF;
  --color-surface-hover: #F7F4EE;
  --color-surface-active: #FDF4ED;

  --color-border: #EAE5DD;              /* Soft card & input borders */
  --color-border-hover: #D6CEC3;
  --color-hairline: #EAE5DD;

  /* Typography Colors */
  --color-text-primary: #1C1917;        /* Stone 900 — deep readable charcoal */
  --color-text-secondary: #57534E;      /* Stone 600 — body copy */
  --color-text-muted: #78716C;          /* Stone 500 — timestamps & sub-labels */
  --color-text-placeholder: #A8A29E;    /* Stone 400 — input placeholders */
  --color-ink: #1C1917;
  --color-ink-black: #1C1917;
  --color-slate-gray: #78716C;
  --color-paper-white: #FFFFFF;

  /* Semantic Status Colors */
  --color-success: #15803D;             /* Paid / Resolved / Active */
  --color-success-bg: #DCFCE7;
  --color-success-border: #BBF7D0;

  --color-warning: #92400E;             /* Unpaid / In Progress / Normal */
  --color-warning-bg: #FEF3C7;
  --color-warning-border: #FDE68A;

  --color-error: #991B1B;               /* High Priority / Overdue / Error */
  --color-error-bg: #FEE2E2;
  --color-error-border: #FECACA;

  --color-info: #0369A1;
  --color-info-bg: #E0F2FE;
  --color-info-border: #BAE6FD;

  /* ─── Typography Families ────────────────────────────────────────────── */
  --font-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Source Serif 4', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --font-truth: var(--font-body);
  --font-sohne: var(--font-body);
  --font-signifier: var(--font-headline);

  /* ─── Typography Weights ─────────────────────────────────────────────── */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ─── Typography Scale ───────────────────────────────────────────────── */
  --text-display-xl: 48px;
  --leading-display-xl: 1.15;
  --tracking-display-xl: -0.025em;

  --text-headline: 36px;
  --leading-headline: 1.2;
  --tracking-headline: -0.02em;

  --text-subhead: 26px;
  --leading-subhead: 1.3;
  --tracking-subhead: -0.01em;

  --text-body-lg: 18px;
  --leading-body-lg: 1.6;

  --text-body: 15px;
  --leading-body: 1.6;

  --text-body-sm: 13.5px;
  --leading-body-sm: 1.5;

  --text-caption: 12.5px;
  --leading-caption: 1.45;

  --text-overline: 11px;
  --leading-overline: 1.2;
  --tracking-overline: 0.12em;

  --text-code: 13.5px;
  --leading-code: 1.5;

  /* Compatibility aliases */
  --text-sm: 13.5px;
  --leading-sm: 1.5;
  --text-display: var(--text-display-xl);
  --leading-display: var(--leading-display-xl);
  --text-display-lg: var(--text-headline);
  --leading-display-lg: var(--leading-headline);
  --text-display-md: var(--text-subhead);
  --leading-display-md: var(--leading-subhead);
  --text-heading-md: 22px;
  --leading-heading-md: 1.3;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.4;
  --text-button-md: 14.5px;
  --leading-button-md: 1.4;

  /* ─── Spacing Scale ──────────────────────────────────────────────────── */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;

  --page-max-width: 1280px;
  --card-padding: 24px;

  /* ─── Border Radii ──────────────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-sm: 6px;                      /* Badges, chips, tags */
  --radius-md: 8px;                      /* Buttons, inputs, dropdowns */
  --radius-lg: 14px;                     /* Cards, dialogs, panels */
  --radius-xl: 20px;                     /* Feature callouts */
  --radius-full: 9999px;                 /* Avatars, status pills */

  --radius-cta: 8px;
  --radius-buttons: 8px;
  --radius-inputs: 8px;
  --radius-cards: 14px;
  --radius-elevatedcards: 14px;
  --radius-smallcards: 8px;
  --radius-images: 12px;

  /* ─── Elevation & Shadows ───────────────────────────────────────────── */
  --shadow-subtle: 0 1px 3px 0 rgba(28, 25, 23, 0.04), 0 1px 2px 0 rgba(28, 25, 23, 0.02);
  --shadow-medium: 0 4px 12px -2px rgba(28, 25, 23, 0.06), 0 2px 6px -2px rgba(28, 25, 23, 0.03);
  --shadow-large: 0 12px 24px -4px rgba(28, 25, 23, 0.08), 0 4px 10px -2px rgba(28, 25, 23, 0.04);
  --shadow-overlay: 0 20px 40px -8px rgba(28, 25, 23, 0.16);
  --shadow-glow-primary: 0 2px 8px rgba(194, 94, 38, 0.2);

  /* ─── Transitions ───────────────────────────────────────────────────── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}