/* =====================================================================
   GO SOLUTIONS — Design Tokens
   Material 3-derived (Syncfusion material3 theme) with GS brand overlay.
   Source: source/Go_Solutions_Component_Library_v1.2_M3.html

   UNIT CONVENTION
   ───────────────
   rem  — typography, spacing, container/component sizing, radii (xs→xl).
          Scales proportionally with user text-size preference + zoom.
          1rem = 14px (html font-size set below).
   px   — borders, hairlines, shadow offsets/blurs, focus rings, capsule
          (radius-full) corners. Ornamental / pixel-snapped values that
          shouldn't scale.
   ===================================================================== */
/* Brand typeface is Quatro Sans (Canva-only). Roboto is the substitute used
   in the design system — same Material 3 default Roboto family, no Google
   Fonts dependency change needed beyond switching the import. */
/* Google Fonts @import removed: the CSP only allows same-origin fonts and customer pages must not call third parties. Roboto/JetBrains Mono are used if installed locally; drop .woff2 files in /fonts to self-host. */

/* ---------------------------------------------------------------------
   Brand typeface — Quatro Sans (Canva-only, no web file yet).
   Declared via local() so machines that have Quatro Sans installed
   (e.g. Canva designers) render the true brand font; everyone else
   falls through the --font-sans stack to Roboto. When a licensed
   .woff2 is provided, add a url() src here and drop the file in fonts/.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Quatro Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Quatro Sans"), local("QuatroSans-Regular");
  font-display: swap;
}
@font-face {
  font-family: "Quatro Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Quatro Sans Bold"), local("QuatroSans-Bold");
  font-display: swap;
}

:root {
  /* ─────────────────────────────────────────────────────────────────
     M3 COLOR ROLES (Syncfusion --color-sf-* mapped, RGB triplets)
     ───────────────────────────────────────────────────────────────── */
  /* Primary — GS navy */
  --color-sf-primary:            14, 68, 122;     /* #0E447A brand-500 */
  --color-sf-primary-container:  219, 234, 254;   /* #DBEAFE brand-100 */
  --color-sf-on-primary:         255, 255, 255;
  --color-sf-on-primary-container: 14, 34, 56;    /* #0E2238 brand-900 */
  /* Secondary — slightly lighter GS navy */
  --color-sf-secondary:          44, 94, 158;     /* #2C5E9E brand-600 */
  --color-sf-secondary-container: 239, 246, 255;  /* #EFF6FF brand-50 */
  --color-sf-on-secondary:       255, 255, 255;
  --color-sf-on-secondary-container: 14, 34, 56;
  /* Tertiary — GS orange accent */
  --color-sf-tertiary:           241, 90, 42;     /* #F15A2A accent */
  --color-sf-tertiary-container: 254, 228, 210;
  --color-sf-on-tertiary:        255, 255, 255;
  /* Surface */
  --color-sf-surface:            255, 255, 255;
  --color-sf-surface-variant:    231, 236, 245;
  --color-sf-on-surface:         15, 23, 42;      /* #0F172A neutral-900 */
  --color-sf-on-surface-variant: 71, 85, 105;     /* #475569 neutral-600 */
  --color-sf-background:         var(--color-sf-surface);
  --color-sf-on-background:      15, 23, 42;
  /* Outline */
  --color-sf-outline:            148, 163, 184;   /* #94A3B8 neutral-400 */
  --color-sf-outline-variant:    226, 232, 240;   /* #E2E8F0 neutral-200 */
  /* Semantic */
  --color-sf-error:              179, 38, 30;
  --color-sf-error-container:    249, 222, 220;
  --color-sf-on-error:           255, 255, 255;
  --color-sf-on-error-container: 65, 14, 11;
  --color-sf-success:            22, 163, 74;     /* #16A34A */
  --color-sf-success-container:  240, 253, 244;
  --color-sf-on-success:         255, 255, 255;
  --color-sf-warning:            245, 158, 11;    /* #F59E0B */
  --color-sf-warning-container:  255, 251, 235;
  --color-sf-on-warning:         255, 255, 255;
  --color-sf-info:               41, 128, 185;    /* #2980B9 */
  --color-sf-info-container:     239, 246, 255;
  --color-sf-on-info:            255, 255, 255;
  /* Inverse / focus */
  --color-sf-inverse-surface:    49, 48, 51;
  --color-sf-inverse-on-surface: 244, 239, 244;
  --color-sf-inverse-primary:    147, 183, 236;
  --color-sf-shadow:             0, 0, 0;
  --color-sf-scrim:              0, 0, 0;
  --color-sf-shadow-focus-ring1: 0 0 0 2px rgb(255,255,255), 0 0 0 4px rgba(14,68,122,0.45);

  /* ─────────────────────────────────────────────────────────────────
     GS BRAND tokens (use these in product code)
     ───────────────────────────────────────────────────────────────── */
  --color-brand-50:   #EFF6FF;
  --color-brand-100:  #DBEAFE;
  --color-brand-300:  #1587CE;
  --color-brand-500:  #0E447A;   /* PRIMARY brand navy */
  --color-brand-600:  #2C5E9E;
  --color-brand-700:  #173554;
  --color-brand-900:  #0E2238;
  --color-accent-500: #F15A2A;   /* PRIMARY brand orange */
  --color-accent-600: #C95F12;

  /* Neutrals */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-900: #0F172A;
  --color-canvas:      #F3F4F8;   /* App background */

  /* Semantic state colors */
  --color-success-50:  #F0FDF4;
  --color-success-500: #16A34A;
  --color-success-700: #15803D;
  --color-warning-50:  #FFFBEB;
  --color-warning-500: #F59E0B;
  --color-warning-700: #B45309;
  --color-error-50:    #F9DEDC;
  --color-error-500:   #DC2626;
  --color-error-700:   #B91C1C;
  --color-info-50:     #EFF6FF;
  --color-info-500:    #2980B9;

  /* ─────────────────────────────────────────────────────────────────
     SEMANTIC FG/BG aliases (for general use)
     ───────────────────────────────────────────────────────────────── */
  --fg-1: var(--color-neutral-900);   /* Primary text */
  --fg-2: var(--color-neutral-600);   /* Secondary text / helper */
  --fg-3: var(--color-neutral-500);   /* Tertiary / meta */
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--color-brand-500);

  --bg-app:    var(--color-canvas);
  --bg-surface: var(--color-neutral-0);
  --bg-subtle: var(--color-neutral-50);
  --bg-muted:  var(--color-neutral-100);
  --bg-brand-tint: var(--color-brand-50);
  --bg-selected:   var(--color-brand-100);

  --border-1: var(--color-neutral-200);
  --border-2: var(--color-neutral-300);
  --border-strong: var(--color-neutral-400);

  /* ─────────────────────────────────────────────────────────────────
     STATE-LAYER opacities (M3)
     ───────────────────────────────────────────────────────────────── */
  --state-hover:    0.08;  /* @kind other */
  --state-focus:    0.12;  /* @kind other */
  --state-pressed:  0.12;  /* @kind other */
  --state-dragged:  0.16;  /* @kind other */
  --state-disabled: 0.38;  /* @kind other */

  /* ─────────────────────────────────────────────────────────────────
     SHAPE / RADIUS (M3)
     rem so corners scale with type. Hairline-thin radii stay in px
     to avoid sub-pixel rounding artifacts at small sizes.
     ───────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   0.2857rem;  /* 4px  · extra-small */
  --radius-sm:   0.5714rem;  /* 8px  · inputs, buttons (interior fills) */
  --radius-md:   0.8571rem;  /* 12px · cards */
  --radius-lg:   1.1429rem;  /* 16px · dialogs, sheets */
  --radius-xl:   2rem;       /* 28px · FAB, hero shapes (rounded to 28px → 2rem ≈ 28px) */
  --radius-full: 999px;      /* chips, badges, pills — px so capsule stays capsule */
  --radius-pill: 999px;      /* legacy alias */

  /* ─────────────────────────────────────────────────────────────────
     ELEVATION / SHADOWS (M3 two-layer formula)
     Shadows stay in px — they're ornamental and px keeps the soft-edge
     rendering consistent across zoom levels. Same for focus rings.
     ───────────────────────────────────────────────────────────────── */
  --elevation-0: none;
  --elevation-1: 0px 1px 2px rgba(0,0,0,0.30), 0px 1px 3px 1px rgba(0,0,0,0.15);
  --elevation-2: 0px 1px 2px rgba(0,0,0,0.30), 0px 2px 6px 2px rgba(0,0,0,0.15);
  --elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.15), 0px 1px 3px rgba(0,0,0,0.30);
  --elevation-4: 0px 6px 10px 4px rgba(0,0,0,0.15), 0px 2px 3px rgba(0,0,0,0.30);
  --elevation-5: 0px 8px 12px 6px rgba(0,0,0,0.15), 0px 4px 4px rgba(0,0,0,0.30);
  --shadow-xs:    var(--elevation-1);
  --shadow-sm:    var(--elevation-2);
  --shadow-md:    var(--elevation-3);
  --shadow-lg:    var(--elevation-4);
  --shadow-focus: 0 0 0 2px rgb(255,255,255), 0 0 0 4px rgba(14,68,122,0.45);

  /* ─────────────────────────────────────────────────────────────────
     BORDER widths — px so 1px lines don't disappear at fractional rem.
     ───────────────────────────────────────────────────────────────── */
  --border-w-1: 1px;
  --border-w-2: 2px;
  --border-w-thick: 4px;

  /* ─────────────────────────────────────────────────────────────────
     SPACING (4px base grid, expressed in rem off 14px root)
     rem so the whole layout scales with the user's text-size preference.
     ───────────────────────────────────────────────────────────────── */
  --space-1: 0.1429rem;   /* 2px  */
  --space-2: 0.2857rem;   /* 4px  */
  --space-3: 0.5714rem;   /* 8px  */
  --space-4: 0.8571rem;   /* 12px */
  --space-5: 1.1429rem;   /* 16px */
  --space-6: 1.7143rem;   /* 24px */
  --space-7: 2.2857rem;   /* 32px */
  --space-8: 3.4286rem;   /* 48px */
  --space-9: 4.5714rem;   /* 64px */

  /* ─────────────────────────────────────────────────────────────────
     TYPOGRAPHY
     Brand: Quatro Sans (Bold + Regular) — Canva-only.
     Production: Roboto (Google Fonts) — the Material 3 default typeface.
     ───────────────────────────────────────────────────────────────── */
  --font-brand: "Quatro Sans", "Roboto", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-sans:  "Quatro Sans", "Roboto", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* M3 type scale — rem values based on 14px root.
     Using rem (not px) lets users with browser zoom / accessibility text-size
     overrides scale the whole system proportionally. The root html font-size
     is 14px (rebased below in the body rule via tokens), so 1rem = 14px. */
  --type-display-lg:  4.0714rem;  /* 57 / 14 */
  --type-display-md:  3.2143rem;  /* 45 / 14 */
  --type-display-sm:  2.5714rem;  /* 36 / 14 */
  --type-headline-lg: 2.2857rem;  /* 32 / 14 */
  --type-headline-md: 2rem;       /* 28 / 14 */
  --type-headline-sm: 1.7143rem;  /* 24 / 14 */
  --type-title-lg:    1.5714rem;  /* 22 / 14 */
  --type-title-md:    1.1429rem;  /* 16 / 14 */
  --type-title-sm:    1rem;       /* 14 / 14 */
  --type-label-lg:    1rem;       /* 14 / 14 */
  --type-label-md:    0.8571rem;  /* 12 / 14 */
  --type-label-sm:    0.7857rem;  /* 11 / 14 */
  --type-body-lg:     1.1429rem;  /* 16 / 14 */
  --type-body-md:     1rem;       /* 14 / 14 */
  --type-body-sm:     0.8571rem;  /* 12 / 14 */

  --type-weight-light:    300;
  --type-weight-regular:  400;
  --type-weight-medium:   500;
  --type-weight-bold:     700;

  /* ─────────────────────────────────────────────────────────────────
     COMPONENT HEIGHTS (M3)
     rem so hit-targets scale with text-size preferences.
     ───────────────────────────────────────────────────────────────── */
  --comp-button-height:    2.8571rem;  /* 40px */
  --comp-button-height-sm: 2.2857rem;  /* 32px */
  --comp-button-height-lg: 3.4286rem;  /* 48px */
  --comp-input-height:     4rem;       /* 56px */
  --comp-chip-height:      2.2857rem;  /* 32px */
  --comp-fab-size:         4rem;       /* 56px */
  --comp-fab-size-sm:      2.8571rem;  /* 40px */
  --comp-avatar-sm:        1.7143rem;  /* 24px */
  --comp-avatar-md:        2.2857rem;  /* 32px */
  --comp-avatar-lg:        2.8571rem;  /* 40px */
  --comp-avatar-xl:        4rem;       /* 56px */

  /* Layout */
  --sidebar-width: 18.5714rem;   /* 260px */
}

/* =====================================================================
   SEMANTIC TEXT STYLES (apply with class names)
   All sizes in rem — scale with user text-size preference.
   ===================================================================== */
.gs-display     { font: 700 var(--type-headline-lg)/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-1); }
.gs-h1          { font: 700 var(--type-headline-sm)/1.2 var(--font-sans); color: var(--fg-1); }
.gs-h2          { font: 700 1.4286rem/1.3 var(--font-sans); color: var(--fg-1); }  /* 20 / 14 */
.gs-h3          { font: 600 var(--type-body-lg)/1.4 var(--font-sans); color: var(--fg-1); }
.gs-eyebrow     { font: 700 var(--type-body-sm)/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-brand-500); }
.gs-body        { font: 400 var(--type-body-md)/1.5 var(--font-sans); color: var(--fg-1); }
.gs-body-lg     { font: 400 var(--type-body-lg)/1.5 var(--font-sans); color: var(--fg-1); }
.gs-body-sm     { font: 400 var(--type-body-sm)/1.4 var(--font-sans); color: var(--fg-2); }
.gs-label       { font: 500 var(--type-label-lg)/1 var(--font-sans); letter-spacing: 0.006em; color: var(--fg-1); }
.gs-label-sm    { font: 500 var(--type-label-md)/1 var(--font-sans); letter-spacing: 0.04em; color: var(--fg-2); }
.gs-overline    { font: 600 var(--type-label-sm)/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.gs-mono        { font: 400 0.9286rem/1.4 var(--font-mono); color: var(--fg-1); }  /* 13 / 14 */

html {
  /* Rebase rem: 1rem = 14px. Any existing code using `1rem`, `0.875rem`,
     or rem-based libraries (Material, MudBlazor) inherits the 14px base
     without needing to know about our --type-body-md token. */
  font-size: 14px;
}
html, body {
  font-family: var(--font-sans);
  font-size: var(--type-body-md);   /* 14px — explicit, matches html base */
  line-height: 1.5;
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}