/* ============================================================
   PROJECTFLOW DESIGN TOKENS
   Enterprise industrial construction platform.
   Palette references site-safety signage and structural steel
   rather than generic SaaS blue/indigo — deliberate choice for
   an audience that lives on scaffolding sites, not dashboards.
   ============================================================ */

:root {
  /* ---- Color: Structure (navigation / chrome) ---- */
  --pf-structure-900: #0E1922;   /* sidebar base — steel at dusk */
  --pf-structure-800: #16232F;
  --pf-structure-700: #1E313F;   /* sidebar hover */
  --pf-structure-600: #2A4356;   /* sidebar active */
  --pf-structure-border: #24343F;

  /* ---- Color: Surface ---- */
  --pf-bg: #F5F6F8;              /* app canvas, cool grey — not cream */
  --pf-surface: #FFFFFF;
  --pf-surface-raised: #FFFFFF;
  --pf-surface-sunken: #EEF1F4;

  /* ---- Color: Text ---- */
  --pf-text-primary: #16222C;
  --pf-text-secondary: #56697A;
  --pf-text-tertiary: #8A97A3;
  --pf-text-inverse: #F4F7F9;
  --pf-text-inverse-muted: #9FB0BE;

  /* ---- Color: Borders ---- */
  --pf-border: #E2E6EA;
  --pf-border-strong: #CBD2D9;

  /* ---- Color: Brand / Action ---- */
  --pf-action-600: #1E5C7A;      /* steel blue — primary actions */
  --pf-action-700: #164A63;
  --pf-action-100: #E4EFF3;

  /* ---- Color: Status — modeled on scaffold inspection tags ---- */
  --pf-status-good: #2E7D53;     /* green tag — cleared / on track */
  --pf-status-good-bg: #E7F3EC;
  --pf-status-caution: #B87A22;  /* amber tag — attention needed */
  --pf-status-caution-bg: #FBF1E1;
  --pf-status-danger: #B3402B;   /* red tag — do not use / blocked */
  --pf-status-danger-bg: #FBEAE6;
  --pf-status-neutral: #56697A;  /* grey tag — inactive / draft */
  --pf-status-neutral-bg: #EEF1F4;
  --pf-status-info: #1E5C7A;
  --pf-status-info-bg: #E4EFF3;

  /* ---- Typography ---- */
  --pf-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  --pf-fs-xs: 0.75rem;     /* 12px — captions, meta */
  --pf-fs-sm: 0.8125rem;   /* 13px — table/body dense */
  --pf-fs-base: 0.875rem;  /* 14px — default body */
  --pf-fs-md: 1rem;        /* 16px — emphasized body */
  --pf-fs-lg: 1.125rem;    /* 18px — card titles */
  --pf-fs-xl: 1.375rem;    /* 22px — page titles */
  --pf-fs-2xl: 1.75rem;    /* 28px — KPI figures */
  --pf-fs-3xl: 2.25rem;    /* 36px — dashboard hero figures */

  --pf-fw-regular: 400;
  --pf-fw-medium: 500;
  --pf-fw-semibold: 600;
  --pf-fw-bold: 700;

  --pf-lh-tight: 1.25;
  --pf-lh-base: 1.5;

  /* ---- Spacing scale (8px grid) ---- */
  --pf-space-1: 4px;
  --pf-space-2: 8px;
  --pf-space-3: 12px;
  --pf-space-4: 16px;
  --pf-space-5: 20px;
  --pf-space-6: 24px;
  --pf-space-8: 32px;
  --pf-space-10: 40px;
  --pf-space-12: 48px;

  /* ---- Radius — restrained, engineered, not bubbly ---- */
  --pf-radius-sm: 3px;
  --pf-radius-md: 5px;
  --pf-radius-lg: 8px;
  --pf-radius-tag: 2px;   /* status tags — near-square, like a real tag */

  /* ---- Elevation — used sparingly ---- */
  --pf-shadow-sm: 0 1px 2px rgba(14, 25, 34, 0.06);
  --pf-shadow-md: 0 2px 8px rgba(14, 25, 34, 0.08);
  --pf-shadow-lg: 0 8px 24px rgba(14, 25, 34, 0.14);
  --pf-shadow-modal: 0 16px 48px rgba(14, 25, 34, 0.28);

  /* ---- Layout ---- */
  --pf-sidebar-width: 248px;
  --pf-sidebar-width-collapsed: 64px;
  --pf-topbar-height: 56px;

  /* ---- Motion — quick and functional, never decorative ---- */
  --pf-ease: cubic-bezier(0.2, 0, 0, 1);
  --pf-duration-fast: 120ms;
  --pf-duration-base: 180ms;

  /* ---- Z-index scale ---- */
  --pf-z-topbar: 100;
  --pf-z-sidebar: 200;
  --pf-z-dropdown: 300;
  --pf-z-modal-backdrop: 400;
  --pf-z-modal: 410;
  --pf-z-toast: 500;
}