/* ============================================================
   Perfect HOA — Design Token Foundation
   All CSS custom properties for the platform redesign.
   Source of truth: new-design/README.md + prototype.
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --phoa-bg:        #EEF1F6;
  --phoa-card:      #FFFFFF;
  --phoa-subtle-1:  #FAFBFE;
  --phoa-subtle-2:  #F9FBFE;
  --phoa-subtle-3:  #F7F9FC;
  --phoa-subtle-4:  #F4F6FB;
  --phoa-subtle-5:  #F1F4FA;
  --phoa-subtle-6:  #F7FAFF;

  /* --- Brand / Primary --- */
  --phoa-primary:        #3B6EF6;
  --phoa-primary-hover:  #2F5BD8;
  --phoa-primary-tint:   #EAF1FF;
  --phoa-primary-tint-2: #EEF3FF;
  --phoa-primary-tint-3: #E7EEFF;

  /* --- Text --- */
  --phoa-text:      #1C2540;
  --phoa-heading:   #2A3352;
  --phoa-secondary: #3D486A;
  --phoa-muted-1:   #59647E;
  --phoa-muted-2:   #6B7690;
  --phoa-muted-3:   #8892A8;
  --phoa-muted-4:   #94A0B8;
  --phoa-muted-5:   #A9B4C8;

  /* --- Borders --- */
  --phoa-border-card:    #E6EBF3;
  --phoa-border:         #E3E8F0;
  --phoa-border-input:   #D9E0EC;
  --phoa-border-input-2: #D8E0F0;
  --phoa-border-divider: #F3F5FA;
  --phoa-border-row:     #E7ECF4;

  /* --- Status: Success --- */
  --phoa-success-text: #1FA463;
  --phoa-success-bg:   #E4F6EC;

  /* --- Status: Warning / Amber --- */
  --phoa-warning-text:  #C08A1E;
  --phoa-warning-text-2: #C77700;
  --phoa-warning-bg:    #FBEFD3;
  --phoa-warning-bg-2:  #FFF4E1;

  /* --- Status: Danger --- */
  --phoa-danger-text: #E5484D;
  --phoa-danger-bg:   #FDE9EC;

  /* --- Status: Purple --- */
  --phoa-purple-text: #7A5BE0;
  --phoa-purple-bg:   #F2ECFE;

  /* --- Status: Navy --- */
  --phoa-navy: #1E2A63;

  /* --- Nav Badges --- */
  --phoa-badge-amber-bg:    #EAB308;
  --phoa-badge-amber-text:  #3A2E00;
  --phoa-badge-navy-bg:     #1E2A63;
  --phoa-badge-navy-text:   #FFFFFF;
  --phoa-badge-blue-bg:     #3B6EF6;
  --phoa-badge-blue-text:   #FFFFFF;
  --phoa-badge-danger-bg:   #E5484D;
  --phoa-badge-danger-text: #FFFFFF;

  /* --- Shell Dimensions --- */
  --phoa-topbar-bg: #1E2A63;
  --phoa-topbar-h:  60px;
  --phoa-subnav-h:  48px;

  /* --- Typography --- */
  --phoa-font: 'Hanken Grotesk', system-ui, sans-serif;

  --phoa-fs-title:   22px;
  --phoa-fs-kpi:     28px;
  --phoa-fs-body:    14px;
  --phoa-fs-body-sm: 13.5px;
  --phoa-fs-label:   13px;
  --phoa-fs-meta:    12px;
  --phoa-fs-eyebrow: 11px;

  --phoa-fw-regular:   400;
  --phoa-fw-medium:    500;
  --phoa-fw-semibold:  600;
  --phoa-fw-bold:      700;
  --phoa-fw-extrabold: 800;

  /* --- Spacing (8px rhythm) --- */
  --phoa-sp-1: 4px;
  --phoa-sp-2: 8px;
  --phoa-sp-3: 12px;
  --phoa-sp-4: 16px;
  --phoa-sp-5: 20px;
  --phoa-sp-6: 24px;
  --phoa-sp-7: 28px;
  --phoa-sp-8: 32px;

  /* --- Radius --- */
  --phoa-r-input:    10px;
  --phoa-r-button:   10px;
  --phoa-r-card:     14px;
  --phoa-r-icon-btn: 8px;
  --phoa-r-badge:    20px;
  --phoa-r-avatar:   50%;

  /* --- Shadows --- */
  --phoa-shadow-dropdown:  0 18px 40px -14px rgba(20, 30, 70, 0.18);
  --phoa-shadow-dropdown-heavy: 0 18px 40px -16px rgba(20, 30, 70, 0.35);
  --phoa-shadow-panel:     0 20px 50px rgba(20, 30, 70, 0.22);
  --phoa-shadow-card:      0 1px 3px rgba(20, 30, 70, 0.06), 0 4px 16px rgba(20, 30, 70, 0.04);

  /* --- Controls --- */
  --phoa-input-h:  44px;
  --phoa-input-h-lg: 48px;
  --phoa-btn-h:    40px;
  --phoa-toggle-w: 44px;
  --phoa-toggle-h: 26px;
}