/* ==========================================================================
   GVS Design System — Colors & Type
   Global View Systems (GV Healthcare) — MyPorter, MyCleaning, MyAudit,
   MyAlert, MyStock. Material Design 3-aligned tokens, light + dark themes.
   ========================================================================== */

/* ---------- Fonts --------------------------------------------------------- */
/* THE FONT FILES LIVE IN THE SIBLING GVS.Components.Fonts PACKAGE, and these URLs point at
   it with a RELATIVE path - `../GVS.Components.Fonts/fonts/x` resolves from this file's own
   location under `_content/GVS.Components/`, which keeps working behind a path base. A
   root-relative `/_content/...` would break every app served under /cleaning, /audit or
   /porter, which is all of them.
   Why split: the fonts were 78% of GVS.Components' 8MB, they never change, and every
   consumer commits the nupkg into its own repository - so each component release was adding
   ~6MB of identical binaries to several git histories, permanently. The declarations stay
   HERE so a consumer needs the package referenced and no extra stylesheet link.

   Material Symbols Rounded — icon font used across the GVS home/suite chrome.
   SELF-HOSTED: the variable woff2 (all axes) ships in that package, so icons work
   on air-gapped and on-prem deployments and no longer depend on fonts.gstatic.com.
   The Google CSS endpoint used to supply both this @font-face AND the base ligature
   class, so both are declared here — dropping either leaves icons rendering as their
   ligature words ("expand_more"). font-display:block avoids that flash on first paint.
   font-variation-settings and the .fill variant live in gvs-myhome.css. */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  src: url("../GVS.Components.Fonts/fonts/material-symbols-rounded.woff2") format("woff2");
  font-display: block;
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

@font-face { font-family: "Montserrat"; font-weight: 200; font-style: normal;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: italic;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: normal;
  src: url("../GVS.Components.Fonts/fonts/Montserrat-Black.ttf") format("truetype"); font-display: swap; }

:root {
  /* ---------- Font families -------------------------------------------- */
  --gvs-font-sans: "Montserrat", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --gvs-font-display: "Montserrat", "Segoe UI", Roboto, sans-serif;
  --gvs-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  /* ---------- Brand palette -------------------------------------------- */
  /* Primary — GVS Teal (healthcare-aligned, calm, professional)          */
  --gvs-teal-50:  #E6F4F3;
  --gvs-teal-100: #C2E4E0;
  --gvs-teal-200: #98D1CC;
  --gvs-teal-300: #6BBEB6;
  --gvs-teal-400: #49AFA5;
  --gvs-teal-500: #1FA094;   /* primary */
  --gvs-teal-600: #158678;
  --gvs-teal-700: #0C6C60;
  --gvs-teal-800: #065149;
  --gvs-teal-900: #023832;

  /* Secondary — GVS Navy (authority, data, dark UI chrome)              */
  --gvs-navy-50:  #E8EDF3;
  --gvs-navy-100: #C5D0DE;
  --gvs-navy-200: #9EB0C6;
  --gvs-navy-300: #7791AE;
  --gvs-navy-400: #577A9B;
  --gvs-navy-500: #3A6389;
  --gvs-navy-600: #2B4E72;
  --gvs-navy-700: #1F3C5B;
  --gvs-navy-800: #142A44;
  --gvs-navy-900: #0A1A2E;

  /* Accent — Amber (attention, pending, sibling product highlights)     */
  --gvs-amber-50:  #FFF6E5;
  --gvs-amber-100: #FFE6B3;
  --gvs-amber-200: #FFD480;
  --gvs-amber-300: #FFC14D;
  --gvs-amber-400: #FFAF1F;
  --gvs-amber-500: #F59E0B;
  --gvs-amber-600: #C67D07;
  --gvs-amber-700: #945C03;

  /* Neutrals (Material "surface tint" aware greys) */
  --gvs-grey-0:   #FFFFFF;
  --gvs-grey-50:  #F7F9FA;
  --gvs-grey-100: #EEF1F4;
  --gvs-grey-200: #DDE3E8;
  --gvs-grey-300: #C2CAD2;
  --gvs-grey-400: #98A3AD;
  --gvs-grey-500: #6E7A84;
  --gvs-grey-600: #4E5962;
  --gvs-grey-700: #343D45;
  --gvs-grey-800: #1F262C;
  --gvs-grey-900: #0F1418;

  /* Semantic — status */
  --gvs-success-50:  #E6F6EC;
  --gvs-success-500: #1F9D55;
  --gvs-success-700: #126E3A;

  --gvs-warning-50:  #FFF4E0;
  --gvs-warning-500: #F59E0B;
  --gvs-warning-700: #945C03;

  --gvs-danger-50:   #FDE8E8;
  --gvs-danger-500:  #D7263D;
  --gvs-danger-700:  #991225;

  --gvs-info-50:     #E6F1FB;
  --gvs-info-500:    #1F6FD1;
  --gvs-info-700:    #0E4896;

  /* Product accents (each "My…" product has a signature hue)            */
  --gvs-product-porter:    #1FA094; /* teal — MyPorter */
  --gvs-product-cleaning:  #2B7FB8; /* blue — MyCleaning */
  --gvs-product-audit:     #6B46C1; /* purple — MyAudit */
  --gvs-product-alert:     #D7263D; /* red — MyAlert */
  --gvs-product-stock:     #C67D07; /* amber — MyStock */

  /* ---------- Semantic — light theme (default) ------------------------ */
  --gvs-bg:            var(--gvs-grey-50);
  --gvs-bg-elevated:   var(--gvs-grey-0);
  --gvs-surface:       var(--gvs-grey-0);
  --gvs-surface-alt:   var(--gvs-grey-100);
  --gvs-surface-sunken:var(--gvs-grey-100);
  --gvs-border:        var(--gvs-grey-200);
  --gvs-border-strong: var(--gvs-grey-300);
  --gvs-divider:       var(--gvs-grey-200);

  --gvs-fg:            var(--gvs-grey-900);
  --gvs-fg-1:          var(--gvs-grey-900);
  --gvs-fg-2:          var(--gvs-grey-700);
  --gvs-fg-3:          var(--gvs-grey-500);
  --gvs-fg-muted:      var(--gvs-grey-500);
  --gvs-fg-inverse:    var(--gvs-grey-0);
  --gvs-fg-on-primary: #FFFFFF;

  --gvs-primary:        var(--gvs-teal-500);
  --gvs-primary-hover:  var(--gvs-teal-600);
  --gvs-primary-press:  var(--gvs-teal-700);
  --gvs-primary-weak:   var(--gvs-teal-50);

  --gvs-secondary:        var(--gvs-navy-600);
  --gvs-secondary-hover:   var(--gvs-navy-700);
  --gvs-secondary-weak:   var(--gvs-navy-50);

  --gvs-focus-ring: 0 0 0 3px rgba(31,160,148,.35);

  /* Elevation (Material-aligned, slightly softer) */
  --gvs-elev-0: none;
  --gvs-elev-1: 0 1px 2px rgba(10,26,46,.06), 0 1px 3px rgba(10,26,46,.08);
  --gvs-elev-2: 0 2px 4px rgba(10,26,46,.06), 0 4px 8px rgba(10,26,46,.08);
  --gvs-elev-3: 0 4px 8px rgba(10,26,46,.08), 0 8px 16px rgba(10,26,46,.10);
  --gvs-elev-4: 0 8px 16px rgba(10,26,46,.10), 0 16px 32px rgba(10,26,46,.12);
  --gvs-elev-5: 0 16px 32px rgba(10,26,46,.14), 0 24px 48px rgba(10,26,46,.16);

  /* Radii (Material rounded) */
  --gvs-radius-xs: 4px;
  --gvs-radius-sm: 6px;
  --gvs-radius-md: 8px;
  --gvs-radius-lg: 12px;
  --gvs-radius-xl: 16px;
  --gvs-radius-2xl: 24px;
  --gvs-radius-pill: 999px;

  /* Spacing scale (8px base) */
  --gvs-space-0: 0;
  --gvs-space-1: 8px;
  --gvs-space-2: 16px;
  --gvs-space-3: 24px;
  --gvs-space-4: 32px;
  --gvs-space-5: 40px;
  --gvs-space-6: 48px;
  --gvs-space-8: 64px;
  --gvs-space-10: 80px;
  --gvs-space-12: 96px;
  --gvs-space-16: 128px;
  --gvs-space-20: 160px;

  /* Type scale (rem base 16) */
  --gvs-text-xs:   12px;
  --gvs-text-sm:   14px;
  --gvs-text-base: 16px;
  --gvs-text-md:   18px;
  --gvs-text-lg:   20px;
  --gvs-text-xl:   24px;
  --gvs-text-2xl:  30px;
  --gvs-text-3xl:  36px;
  --gvs-text-4xl:  48px;
  --gvs-text-5xl:  60px;

  /* Line heights */
  --gvs-lh-tight:  1.15;
  --gvs-lh-snug:   1.3;
  --gvs-lh-normal: 1.5;
  --gvs-lh-loose:  1.7;

  /* Tracking */
  --gvs-track-tight: -0.02em;
  --gvs-track-normal: 0;
  --gvs-track-wide:  0.04em;
  --gvs-track-caps:  0.08em;

  /* Motion — Material-style durations & easings */
  --gvs-ease-standard: cubic-bezier(.2,0,0,1);
  --gvs-ease-emphasized: cubic-bezier(.2,0,0,1);
  --gvs-ease-decelerate: cubic-bezier(0,0,0,1);
  --gvs-ease-accelerate: cubic-bezier(.3,0,1,1);
  --gvs-dur-fast: 120ms;
  --gvs-dur-base: 200ms;
  --gvs-dur-slow: 320ms;

  /* Layout */
  --gvs-container-sm: 640px;
  --gvs-container-md: 960px;
  --gvs-container-lg: 1200px;
  --gvs-container-xl: 1440px;

  /* Touch targets */
  --gvs-touch-min: 44px;
}

/* ---------- Dark theme ----------------------------------------------------*/
[data-theme="dark"], .gvs-dark {
  --gvs-bg:            var(--gvs-navy-900);
  --gvs-bg-elevated:   var(--gvs-navy-800);
  --gvs-surface:       var(--gvs-navy-800);
  --gvs-surface-alt:   var(--gvs-navy-700);
  --gvs-surface-sunken:#081524;
  --gvs-border:        #24385A;
  --gvs-border-strong: #38507A;
  --gvs-divider:       #24385A;

  --gvs-fg:            #E7EDF5;
  --gvs-fg-1:          #F3F6FB;
  --gvs-fg-2:          #C3CEDF;
  --gvs-fg-3:          #8C9AB2;
  --gvs-fg-muted:      #8C9AB2;
  --gvs-fg-inverse:    var(--gvs-grey-900);
  --gvs-fg-on-primary: #042524;

  --gvs-primary:        var(--gvs-teal-400);
  --gvs-primary-hover:  var(--gvs-teal-300);
  --gvs-primary-press:  var(--gvs-teal-200);
  --gvs-primary-weak:   rgba(31,160,148,.14);

  --gvs-secondary:      var(--gvs-navy-300);
  --gvs-secondary-hover:var(--gvs-navy-200);
  --gvs-secondary-weak: rgba(87,122,155,.18);

  --gvs-success-50:  rgba(31,157,85,.14);
  --gvs-warning-50:  rgba(245,158,11,.16);
  --gvs-danger-50:   rgba(215,38,61,.16);
  --gvs-info-50:     rgba(31,111,209,.16);

  --gvs-elev-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --gvs-elev-2: 0 2px 6px rgba(0,0,0,.4),  0 4px 10px rgba(0,0,0,.45);
  --gvs-elev-3: 0 4px 12px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.5);
  --gvs-elev-4: 0 8px 20px rgba(0,0,0,.5),  0 16px 36px rgba(0,0,0,.55);
}

/* ---------- Semantic type tokens ----------------------------------------- */
:root {
  --gvs-display-font: var(--gvs-font-display);
  --gvs-display-weight: 800;

  --gvs-h1-size: 48px; --gvs-h1-weight: 800; --gvs-h1-lh: 1.1;  --gvs-h1-track: -0.02em;
  --gvs-h2-size: 36px; --gvs-h2-weight: 700; --gvs-h2-lh: 1.15; --gvs-h2-track: -0.015em;
  --gvs-h3-size: 28px; --gvs-h3-weight: 700; --gvs-h3-lh: 1.2;  --gvs-h3-track: -0.01em;
  --gvs-h4-size: 22px; --gvs-h4-weight: 600; --gvs-h4-lh: 1.25;
  --gvs-h5-size: 18px; --gvs-h5-weight: 600; --gvs-h5-lh: 1.3;
  --gvs-h6-size: 14px; --gvs-h6-weight: 700; --gvs-h6-lh: 1.3;  --gvs-h6-track: 0.08em;

  --gvs-body-size: 16px; --gvs-body-weight: 400; --gvs-body-lh: 1.5;
  --gvs-body-sm-size: 14px;
  --gvs-caption-size: 12px; --gvs-caption-weight: 500; --gvs-caption-track: 0.02em;
  --gvs-overline-size: 12px; --gvs-overline-weight: 700; --gvs-overline-track: 0.12em;
  --gvs-button-size: 14px; --gvs-button-weight: 600; --gvs-button-track: 0.04em;
}

/* ---------- Base resets & helpers ---------------------------------------- */
.gvs-body, body.gvs {
  font-family: var(--gvs-font-sans);
  font-size: var(--gvs-body-size);
  line-height: var(--gvs-body-lh);
  color: var(--gvs-fg);
  background: var(--gvs-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gvs-h1 { font-family: var(--gvs-display-font); font-weight: var(--gvs-h1-weight); font-size: var(--gvs-h1-size); line-height: var(--gvs-h1-lh); letter-spacing: var(--gvs-h1-track); color: var(--gvs-fg-1); }
.gvs-h2 { font-family: var(--gvs-display-font); font-weight: var(--gvs-h2-weight); font-size: var(--gvs-h2-size); line-height: var(--gvs-h2-lh); letter-spacing: var(--gvs-h2-track); color: var(--gvs-fg-1); }
.gvs-h3 { font-family: var(--gvs-display-font); font-weight: var(--gvs-h3-weight); font-size: var(--gvs-h3-size); line-height: var(--gvs-h3-lh); letter-spacing: var(--gvs-h3-track); color: var(--gvs-fg-1); }
.gvs-h4 { font-family: var(--gvs-font-sans); font-weight: var(--gvs-h4-weight); font-size: var(--gvs-h4-size); line-height: var(--gvs-h4-lh); color: var(--gvs-fg-1); }
.gvs-h5 { font-family: var(--gvs-font-sans); font-weight: var(--gvs-h5-weight); font-size: var(--gvs-h5-size); line-height: var(--gvs-h5-lh); color: var(--gvs-fg-1); }
.gvs-h6 { font-family: var(--gvs-font-sans); font-weight: var(--gvs-h6-weight); font-size: var(--gvs-h6-size); line-height: var(--gvs-h6-lh); letter-spacing: var(--gvs-h6-track); text-transform: uppercase; color: var(--gvs-fg-2); }
.gvs-p  { font-size: var(--gvs-body-size); line-height: var(--gvs-body-lh); color: var(--gvs-fg-2); }
.gvs-p-sm { font-size: var(--gvs-body-sm-size); line-height: 1.5; color: var(--gvs-fg-2); }
.gvs-caption  { font-size: var(--gvs-caption-size); font-weight: var(--gvs-caption-weight); letter-spacing: var(--gvs-caption-track); color: var(--gvs-fg-3); }
.gvs-overline { font-size: var(--gvs-overline-size); font-weight: var(--gvs-overline-weight); letter-spacing: var(--gvs-overline-track); text-transform: uppercase; color: var(--gvs-fg-3); }
.gvs-mono { font-family: var(--gvs-font-mono); font-size: 13px; color: var(--gvs-fg-2); }