/* tokens.css — every design decision as a custom property.
   This is the ONLY place brand values live: swap the logo in ui/brand.js and
   the colours here, and the whole application rebrands. A hex code typed
   into a component is a hex code that will be wrong after the next change. */
:root {
  /* Brand — Swastik Solutions trust blue */
  --c-primary: #0B50E0;
  --c-primary-strong: #0A46C4;
  --c-primary-light: #E9EFFD;
  --c-heading: #0F172A;
  --c-body: #334155;
  --c-secondary: #64748B;
  --c-light: #94A3B8;
  --c-bg: #F8FAFC;
  --c-card: #FFFFFF;
  --c-border: #E2E8F0;
  --c-input-border: #CBD5E1;
  --c-success: #16A34A;
  --c-success-bg: #DCFCE7;
  --c-warning: #D97706;
  --c-warning-bg: #FEF3C7;
  --c-error: #DC2626;
  --c-error-bg: #FEE2E2;
  --c-info: #0369A1;
  --c-info-bg: #E0F2FE;

  /* Type */
  --font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-page: 24px;    --lh-page: 32px;    --fw-page: 700;
  --fs-section: 18px; --lh-section: 26px; --fw-section: 600;
  --fs-card: 16px;    --lh-card: 24px;    --fw-card: 600;
  --fs-body: 14px;    --lh-body: 20px;
  --fs-nav: 14px;     --lh-nav: 20px;     --fw-nav: 500;
  --fs-table: 13px;   --lh-table: 20px;
  --fs-thead: 12px;   --lh-thead: 18px;   --fw-thead: 600;
  --fs-label: 12px;   --lh-label: 18px;   --fw-label: 500;
  --fs-helper: 12px;  --lh-helper: 18px;
  --fs-kpi: 26px;     --lh-kpi: 33px;     --fw-kpi: 700;
  --fs-button: 14px;  --fw-button: 600;
  /* Inputs are 16px: anything smaller makes iOS zoom the page on focus. */
  --fs-input: 16px;

  /* Space (4 8 12 16 20 24 32 40) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* Shape — quiet, business-professional; no decorative shadows */
  --r-card: 12px;
  --r-control: 8px;
  --r-nav: 8px;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-lift: 0 6px 16px rgba(15, 23, 42, .08);

  /* Motion — 150ms feedback, 250ms transitions; transform/opacity only. */
  --t-fast: 150ms;
  --t-med: 250ms;
  --ease-out: cubic-bezier(.25, .1, .25, 1);

  /* Skeleton loading */
  --c-skeleton: #EDF1F6;
  --c-skeleton-sheen: #F6F8FB;

  /* Sizing */
  --tap: 44px;               /* every tap target */
  --control-h: 40px;
  --sidebar-w: 232px;
  --sidebar-rail: 64px;      /* collapsed sidebar */
  --topbar-h: 52px;
  --bottomnav-h: 56px;
  --content-max: 1080px;     /* comfortable reading width, never edge-to-edge */
  --icon: 18px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}