/*
  Munafasat design tokens
  Source: assets/reference/Colors.png (primary/accent/neutral scales),
  assets/reference/Side navigation*.png (sidebar geometry),
  and explicit brand values supplied for the SIDF header gradient.
  Each token here should map to a PowerApps Canvas theme value 1:1 —
  see docs/component-mapping.md.
*/

:root {
  /* ---- Brand ---- */
  --color-brand-gradient-start: #699843;
  --color-brand-gradient-end: #517632;
  --color-header-gradient: linear-gradient(90deg, var(--color-brand-gradient-start) 0%, var(--color-brand-gradient-end) 100%);

  /* ---- Primary Green scale ---- */
  --color-green-50: #EEF4E8;
  --color-green-100: #DCE9D2;
  --color-green-200: #BBD6A9;
  --color-green-300: #99C280;
  --color-green-400: #82B564;
  --color-green-500: #6BA548;
  --color-green-600: #699843;
  --color-green-700: #517632;
  --color-green-800: #3F5D27;
  --color-green-900: #2E441C;

  /* ---- Primary Blue scale ---- */
  --color-blue-50: #EAF1F8;
  --color-blue-100: #D3E3F1;
  --color-blue-200: #A8C7E3;
  --color-blue-300: #7CACD5;
  --color-blue-400: #5090C7;
  --color-blue-500: #3378B5;
  --color-blue-600: #2A6193;
  --color-blue-700: #204A71;
  --color-blue-800: #17344F;
  --color-blue-900: #0E1E2E;

  /* ---- AI accent (purple) — used for "Generate/Review with AI" actions
     on Steps 6-8, visually distinct from the green brand/primary scale ---- */
  --color-purple-50: #F2EEFC;
  --color-purple-100: #E4D9F9;
  --color-purple-500: #7C5CE0;
  --color-purple-600: #6A47D6;
  --color-purple-700: #5636B0;

  /* ---- Semantic: Error / Warning / Success ---- */
  --color-error-50: #FCEBEA;
  --color-error-100: #F8CFCC;
  --color-error-400: #E2543F;
  --color-error-500: #DD3822;
  --color-error-600: #C22C18;
  --color-error-700: #971F0F;

  --color-warning-50: #FDF3E0;
  --color-warning-100: #FBE4B8;
  --color-warning-400: #F0A620;
  --color-warning-500: #E08E00;
  --color-warning-600: #B87200;
  --color-warning-700: #8A5600;

  --color-success-50: #E9F5EE;
  --color-success-100: #CBE9D6;
  --color-success-400: #3FA76A;
  --color-success-500: #23945A;
  --color-success-600: #17784A;
  --color-success-700: #0F5C39;

  /* ---- Neutrals (light mode) ---- */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F9FAF8;
  --color-neutral-100: #F6F8F4;
  --color-neutral-200: #E7EAE3;
  --color-neutral-300: #D5D9D0;
  --color-neutral-400: #AEB4A8;
  --color-neutral-500: #868D80;
  --color-neutral-600: #656C60;
  --color-neutral-700: #474D43;
  --color-neutral-800: #2E332B;
  --color-neutral-900: #1B1F19;

  /* ---- Surfaces ---- */
  --surface-app-bg: var(--color-neutral-50);
  --surface-card: var(--color-neutral-0);
  --surface-sidebar: #F6F8F4;
  --surface-sidebar-border: var(--color-neutral-200);
  --surface-header: var(--color-header-gradient);
  --surface-active: #E7F0E1;
  --surface-hover: var(--color-neutral-100);

  /* ---- Text ---- */
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-on-brand: #FFFFFF;
  --text-link: var(--color-blue-600);

  /* ---- Borders ---- */
  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);

  /* ---- Typography ---- */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.45;

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

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(27, 31, 25, 0.06);
  --shadow-md: 0 4px 12px rgba(27, 31, 25, 0.08);
  --shadow-lg: 0 12px 32px rgba(27, 31, 25, 0.14);

  /* ---- App shell geometry ---- */
  --header-height: 64px;
  --sidebar-width-collapsed: 64px;
  --sidebar-width-expanded: 240px;
  --transition-shell: 180ms ease;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-sidebar: 90;
  --z-dropdown: 200;
  --z-overlay: 300;
}