/* ============================================================
   DESIGN TOKENS — ReSHAPE production alignment
   Aligned with https://reshape.ie (main app design system)
   ============================================================ */

/* Load Inter + Montserrat via <link> in index.html if desired (e.g. Google Fonts) */

:root {
  /* --- ReSHAPE brand (production) --- */
  --color-primary:         #004383;
  --color-primary-hover:   #003161;
  --color-secondary:       #aa985e;
  --color-text-primary:    #202939;
  --color-text-secondary:  #4b5565;
  --color-text-tertiary:   #6b7280;
  --color-border:          #e3e8ef;
  --color-border-secondary:#cdd5df;
  --color-positive:        #00973d;
  --color-positive-light:  #e5f4eb;
  --color-bg-primary:      #2c417a;
  --color-bg-secondary:    #f8fafc;
  --color-icon-primary:    #9aa4b2;
  --color-white:           #ffffff;

  /* --- Brand palette (alias for components) --- */
  --color-brand-900:   #00274d;
  --color-brand-800:   #003161;
  --color-brand-700:   #004383;
  --color-brand-600:   #024180;
  --color-brand-500:   #2c417a;
  --color-brand-400:   #48a4f6;
  --color-brand-300:   #73a4cd;
  --color-brand-200:   #e3f0fc;
  --color-brand-100:   #eaf4ff;

  /* --- Semantic colours (ReSHAPE-aligned) --- */
  --color-success-700: #127d3c;
  --color-success-500: #00973d;
  --color-success-300: #72bc1e;
  --color-success-100: #d7f5e4;

  --color-danger-700:  #c53030;
  --color-danger-500:  #e53e3e;
  --color-danger-300:  #fc8181;
  --color-danger-100:  #fed7d7;

  --color-warning-700: #975a16;
  --color-warning-500: #d69e2e;
  --color-warning-300: #fbc921;
  --color-warning-100: #fef3c7;

  --color-purple-700:  #71038d;
  --color-purple-500:  #c391fa;
  --color-purple-300:  #eed7f5;
  --color-purple-100:  #f3eafd;

  --color-teal-700:    #234e52;
  --color-teal-500:    #38b2ac;
  --color-teal-300:    #81e6d9;
  --color-teal-100:    #e6fffa;

  --color-orange-700:  #c05621;
  --color-orange-500:  #dd6b20;
  --color-orange-300:  #f6ad55;
  --color-orange-100:  #fff2e1;

  /* --- Neutral grey scale (ReSHAPE) --- */
  --color-gray-950:    #0d1117;
  --color-gray-900:    #202939;
  --color-gray-800:    #2d3748;
  --color-gray-700:    #4b5565;
  --color-gray-600:    #697586;
  --color-gray-500:    #9aa4b2;
  --color-gray-400:    #cdd5df;
  --color-gray-300:    #e3e8ef;
  --color-gray-200:    #f3f4f6;
  --color-gray-100:    #f8f9fb;
  --color-gray-50:     #fafafa;

  /* --- Insight Mode accent colours --- */
  --mode-demand-color:   var(--color-primary);
  --mode-training-color: var(--color-teal-500);
  --mode-engagement-color: var(--color-purple-500);

  /* --- Heatmap colours (Training coverage) --- */
  --heat-high:  #2166ac;
  --heat-mid:   #f7f7f7;
  --heat-low:   #d73027;

  /* --- Typography (ReSHAPE: Inter + Montserrat) --- */
  --font-sans:  Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-heading: Montserrat, Inter, var(--font-sans);
  --font-mono:  'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --text-xs:    0.6875rem;  /* 11px */
  --text-sm:    0.75rem;    /* 12px */
  --text-base:  0.8125rem;  /* 13px */
  --text-md:    0.875rem;   /* 14px */
  --text-lg:    1rem;       /* 16px */
  --text-xl:    1.125rem;   /* 18px */
  --text-2xl:   1.375rem;   /* 22px */
  --text-3xl:   1.75rem;    /* 28px */
  --text-4xl:   2.25rem;    /* 36px */

  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.5;

  /* --- Spacing scale (4px base) --- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* --- Border radius (ReSHAPE: .625rem default) --- */
  --radius:      0.625rem;  /* 10px - production */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* --- Shadows (ReSHAPE-aligned) --- */
  --shadow-xs:  0 1px 2px rgba(10, 13, 18, 0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.08);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.08);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,0.06);
  --ring: 0 0 0 2px rgba(44, 65, 122, 0.3);

  /* --- Z-index layers --- */
  --z-map:        0;
  --z-map-overlay: 400;
  --z-panel:      500;
  --z-toolbar:    600;
  --z-drawer:     700;
  --z-filter:     800;
  --z-modal:      900;
  --z-tooltip:    1000;

  /* --- Transitions --- */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-drawer: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout dimensions --- */
  --toolbar-height:      56px;
  --logo-height:        36px;
  --logo-width:         160px;
  --entity-panel-width:  300px;
  --filter-panel-width:  260px;
  --drawer-min-height:   48px;
  --drawer-default-pct:  35;
}