/* GreenLoop UI v2 — design tokens.
   Values are the EZ OMS "Minimal" theme (ez-oms/new-frontend/src/theme):
   palette.ts, typography.ts, shadows.ts, custom-shadows.ts. Change a value
   here and every component follows; components never hard-code colours. */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/public-sans-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/public-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-display: swap; font-weight: 800; src: url("../fonts/barlow-latin-800-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Palette — primary is the GreenLoop green (theme-config.ts). */
  --gl-primary-lighter: #C8FAD6;
  --gl-primary-light: #5BE49B;
  --gl-primary-main: #00A76F;
  --gl-primary-dark: #007867;
  --gl-primary-darker: #004B50;
  --gl-primary-contrast: #FFFFFF;
  --gl-primary-channel: 0 167 111;

  --gl-secondary-lighter: #EFD6FF;
  --gl-secondary-light: #C684FF;
  --gl-secondary-main: #8E33FF;
  --gl-secondary-dark: #5119B7;
  --gl-secondary-darker: #27097A;
  --gl-secondary-contrast: #FFFFFF;
  --gl-secondary-channel: 142 51 255;

  --gl-info-lighter: #CAFDF5;
  --gl-info-light: #61F3F3;
  --gl-info-main: #00B8D9;
  --gl-info-dark: #006C9C;
  --gl-info-darker: #003768;
  --gl-info-contrast: #FFFFFF;
  --gl-info-channel: 0 184 217;

  --gl-success-lighter: #D3FCD2;
  --gl-success-light: #77ED8B;
  --gl-success-main: #22C55E;
  --gl-success-dark: #118D57;
  --gl-success-darker: #065E49;
  --gl-success-contrast: #FFFFFF;
  --gl-success-channel: 34 197 94;

  --gl-warning-lighter: #FFF5CC;
  --gl-warning-light: #FFD666;
  --gl-warning-main: #FFAB00;
  --gl-warning-dark: #B76E00;
  --gl-warning-darker: #7A4100;
  --gl-warning-contrast: #1C252E;
  --gl-warning-channel: 255 171 0;

  --gl-error-lighter: #FFE9D5;
  --gl-error-light: #FFAC82;
  --gl-error-main: #FF5630;
  --gl-error-dark: #B71D18;
  --gl-error-darker: #7A0916;
  --gl-error-contrast: #FFFFFF;
  --gl-error-channel: 255 86 48;

  --gl-grey-50: #FCFDFD;
  --gl-grey-100: #F9FAFB;
  --gl-grey-200: #F4F6F8;
  --gl-grey-300: #DFE3E8;
  --gl-grey-400: #C4CDD5;
  --gl-grey-500: #919EAB;
  --gl-grey-600: #637381;
  --gl-grey-700: #454F5B;
  --gl-grey-800: #1C252E;
  --gl-grey-900: #141A21;
  --gl-grey-500-channel: 145 158 171;

  --gl-text-primary: var(--gl-grey-800);
  --gl-text-secondary: var(--gl-grey-600);
  --gl-text-disabled: var(--gl-grey-500);

  --gl-bg-default: var(--gl-grey-100);
  --gl-bg-paper: #FFFFFF;
  --gl-bg-neutral: var(--gl-grey-200);

  --gl-divider: rgb(var(--gl-grey-500-channel) / 0.2);
  --gl-border: var(--gl-grey-300);
  --gl-action-hover: rgb(var(--gl-grey-500-channel) / 0.08);
  --gl-action-selected: rgb(var(--gl-grey-500-channel) / 0.16);
  --gl-action-focus: rgb(var(--gl-grey-500-channel) / 0.24);
  --gl-action-disabled: rgb(var(--gl-grey-500-channel) / 0.8);
  --gl-action-disabled-bg: rgb(var(--gl-grey-500-channel) / 0.24);
  --gl-focus-ring: 0 0 0 3px rgb(var(--gl-primary-channel) / 0.24);
  --gl-backdrop: rgb(28 37 46 / 0.48);

  /* Typography — Public Sans for text, Barlow for display headings. */
  --gl-font-primary: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gl-font-secondary: "Barlow", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gl-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

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

  /* Radius — MUI shape.borderRadius is 8. */
  --gl-radius-xs: 4px;
  --gl-radius-sm: 8px;
  --gl-radius-md: 12px;
  --gl-radius-lg: 16px;
  --gl-radius-full: 9999px;

  /* Shadows (custom-shadows.ts, grey 500 channel). */
  --gl-shadow-z1: 0 1px 2px 0 rgb(var(--gl-grey-500-channel) / 0.16);
  --gl-shadow-z4: 0 4px 8px 0 rgb(var(--gl-grey-500-channel) / 0.16);
  --gl-shadow-z8: 0 8px 16px 0 rgb(var(--gl-grey-500-channel) / 0.16);
  --gl-shadow-z12: 0 12px 24px -4px rgb(var(--gl-grey-500-channel) / 0.16);
  --gl-shadow-z16: 0 16px 32px -4px rgb(var(--gl-grey-500-channel) / 0.16);
  --gl-shadow-z20: 0 20px 40px -4px rgb(var(--gl-grey-500-channel) / 0.16);
  --gl-shadow-z24: 0 24px 48px 0 rgb(var(--gl-grey-500-channel) / 0.16);
  --gl-shadow-card: 0 0 2px 0 rgb(var(--gl-grey-500-channel) / 0.2), 0 12px 24px -4px rgb(var(--gl-grey-500-channel) / 0.12);
  --gl-shadow-dropdown: 0 0 2px 0 rgb(var(--gl-grey-500-channel) / 0.24), -20px 20px 40px -4px rgb(var(--gl-grey-500-channel) / 0.24);
  --gl-shadow-dialog: -40px 40px 80px -8px rgb(0 0 0 / 0.24);
  --gl-shadow-primary: 0 8px 16px 0 rgb(var(--gl-primary-channel) / 0.24);
  --gl-shadow-error: 0 8px 16px 0 rgb(var(--gl-error-channel) / 0.24);

  /* Layout (layouts/dashboard/css-vars.ts). The sidebar is fixed from 1200px
     (MUI lg), the off-canvas drawer below it. */
  --gl-nav-width: 300px;
  --gl-nav-mini-width: 88px;
  --gl-nav-mobile-width: 288px;
  --gl-header-height: 64px;
  --gl-header-height-desktop: 72px;
  --gl-content-gutter: 16px;
  --gl-content-gutter-sm: 24px;
  --gl-content-gutter-desktop: 40px;
  --gl-content-max: 1536px;
  --gl-layout-duration: 120ms;

  /* Motion. */
  --gl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gl-duration-fast: 150ms;
  --gl-duration: 250ms;

  /* Stacking. */
  --gl-z-header: 1100;
  --gl-z-nav: 1200;
  --gl-z-overlay: 1300;
  --gl-z-dialog: 1400;
  --gl-z-toast: 1500;
  --gl-z-tooltip: 1600;
}