/* ============================================================
   Gatepro — Digital Cattle Fattening Platform
   tokens.css — Design tokens (CSS custom properties)
   Single source of truth for color, type, spacing, elevation.
   ============================================================ */

:root {
  /* ---------- Brand palette ---------- */
  --c-navy-950: #071729;
  --c-navy-900: #0b2545;          /* Navy blue (sidebar / headings) */
  --c-navy-800: #123354;
  --c-navy-700: #1a4268;
  --c-navy-600: #245381;

  --c-blue-700: #0f4fb3;
  --c-blue-600: #1668dc;          /* Enterprise blue (primary) */
  --c-blue-500: #2f7de1;
  --c-blue-100: #dbe8fd;
  --c-blue-50:  #eaf2fe;

  --c-green-700: #0b7a4d;
  --c-green-600: #15a366;         /* Gatepro green (brand accent) */
  --c-green-100: #c9ecdd;
  --c-green-50:  #e5f6ee;

  /* ---------- Neutrals ---------- */
  --c-bg:        #f4f6fa;         /* Light gray interface background */
  --c-surface:   #ffffff;         /* White cards */
  --c-border:    #e3e8f0;
  --c-border-md: #cbd5e1;
  --c-text-1:    #12253f;         /* Primary text */
  --c-text-2:    #4a5c76;         /* Secondary text */
  --c-text-3:    #8391a7;         /* Muted text */

  /* ---------- Status (red / amber / green ONLY for status) ---------- */
  --c-success:     #17804f;
  --c-success-bg:  #e3f4ea;
  --c-success-bd:  #b7dfca;
  --c-warning:     #92400e;
  --c-warning-bg:  #fef3df;
  --c-warning-bd:  #f2d8a4;
  --c-danger:      #c9363c;
  --c-danger-bg:   #fdecec;
  --c-danger-bd:   #f4c4c6;
  --c-info:        #0f4fb3;
  --c-info-bg:     #eaf2fe;
  --c-info-bd:     #c2d9f8;

  /* WhatsApp simulation accent (used only inside the simulation view) */
  --c-wa:      #1fae59;
  --c-wa-bg:   #e7f7ec;
  --c-wa-chat: #ece5dd;

  /* ---------- Typography ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* ---------- Spacing scale ---------- */
  --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;

  /* ---------- Radii ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
  --sh-md: 0 4px 12px -2px rgba(11, 37, 69, 0.12), 0 2px 6px -2px rgba(11, 37, 69, 0.08);
  --sh-lg: 0 16px 40px -14px rgba(11, 37, 69, 0.28);
  --sh-pop: 0 8px 28px -8px rgba(11, 37, 69, 0.22);

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 3px rgba(22, 104, 220, 0.28);

  /* ---------- Layout metrics ---------- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --header-h: 64px;
  --content-max: 1480px;

  /* ---------- Z-index map ---------- */
  --z-sidebar: 40;
  --z-header: 50;
  --z-pop: 70;
  --z-overlay: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 110;

  /* ---------- Motion ---------- */
  --t-fast: 140ms ease;
  --t-med: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}