/* =====================================================================
   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. */

@import url(stat-cards.css);
@import url(data-tables.css);
@import url(sidebar-nav.css);
@import url(stat-cards.css);

:root {
    /* ─────────────────────────────────────────────────────────────────
     GS BRAND tokens (use these in product code)
     ───────────────────────────────────────────────────────────────── */
    --color-brand-50: #EFF6FF; /* Subtle brand bg */ /* (239, 246, 255) */
    --color-brand-100: #DBEAFE; /* Selected row bg */ /* (219, 234, 254) */
    --color-brand-300: #1587CE; /* Decorative */ /* (21, 135, 206) */
    --color-brand-500: #0E447A; /* Primary brand */ /* (14, 68, 122) */
    --color-brand-600: #2C5E9E; /* Hover/active */ /* (44, 94, 158) */
    --color-brand-700: #173554; /* Pressed */ /* (23, 53, 84) */
    --color-brand-900: #0E2238; /* Headings on light */ /* (14, 34, 56) */
    --color-accent-50: #FEE4D2; /* Subtle accent bg */ /* (254, 228, 210) */
    --color-accent-500: #F15A2A; /* Brand accent (logo) */ /* (241, 90, 42) */
    --color-accent-600: #D94E1F; /* (217, 78, 31) */
    --color-product-GoIDEA: #F0E442; /* (240, 228, 66) */
    --color-product-GoCLAIM: #2980B9; /* (41, 128, 185) */
    --color-header-bg: #EBF1F9; /* (235, 241, 249) */
    /* Neutrals */
    --color-neutral-0: #FFFFFF; /* Surfaces */ /* (255, 255, 255) */
    --color-neutral-50: #F8FAFC; /* Page bg */ /* (248, 250, 252) */
    --color-neutral-100: #F1F5F9; /* Subtle surfaces */ /* (241, 245, 249) */
    --color-neutral-200: #E2E8F0; /* Borders */ /* (226, 232, 240) */
    --color-neutral-300: #CBD5E1; /* Form borders */ /* (203, 213, 225) */
    --color-neutral-400: #94A3B8; /* Disabled text */ /* (148, 163, 184) */
    --color-neutral-500: #64748B; /* Tertiary text */ /* (100, 116, 139) */
    --color-neutral-600: #475569; /* Body secondary */ /* (71, 85, 105) */
    --color-neutral-700: #334155; /* Strong body */ /* (51, 65, 85) */
    --color-neutral-900: #0F172A; /* Headings, body */ /* (15, 23, 42) */
    --color-canvas: #F3F4F8; /* App background */ /* (243, 244, 248) */
    /* Semantic state colors */
    --color-success-50: #F0FDF4; /* Success background */ /* (240, 253, 244) */
    --color-success-500: #16A34A; /* Success */ /* (22, 163, 74) */
    --color-success-700: #15803D; /* Success dark */ /* (21, 128, 61) */
    --color-warning-50: #FFFBEB; /* Warning background */ /* (255, 251, 235) */
    --color-warning-500: #F59E0B; /* Warning */ /* (245, 158, 11) */
    --color-warning-700: #B45309; /* Warning dark */ /* (180, 83, 9) */
    --color-error-50: #FEF2F2; /* Error background */ /* (254, 242, 242) */
    --color-error-500: #DC2626; /* Error */ /* (220, 38, 38) */
    --color-error-700: #B91C1C; /* Error dark */ /* (185, 28, 28) */
    --color-info-50: #EFF6FF; /* Info background */ /* (239, 246, 255) */
    --color-info-500: #2980B9; /* Info */ /* (41, 128, 185) */
    --color-surface-variant: #e7ecf5; /* (231, 236, 245) */
    --color-inverse-surface: #313033; /* (49, 48, 51) */
    --color-inverse-on-surface: #f4eff4; /* (244, 239, 244) */
    --color-inverse-primary: #93b7ec; /* (147, 183, 236) */
    /* Primary — GS navy */
    --color-sf-primary: var(--color-brand-500);
    --color-sf-primary-container: var(--color-brand-100);
    --color-sf-on-primary: var(--color-neutral-0);
    --color-sf-on-primary-container: var(--color-brand-900);
    /* Secondary — slightly lighter GS navy */
    --color-sf-secondary: var(--color-brand-600);
    --color-sf-secondary-container: var(--color-brand-50);
    --color-sf-on-secondary: var(--color-neutral-0);
    --color-sf-on-secondary-container: var(--color-brand-900);
    /* Tertiary — GS orange accent */
    --color-sf-tertiary: var(--color-accent-500);
    --color-sf-tertiary-container: var(--color-accent-50);
    --color-sf-on-tertiary: var(--color-neutral-0);
    --color-sf-on-tertiary-container: var(--color-brand-900);
    /* Surface */
    --color-sf-surface: var(--color-neutral-0);
    --color-sf-surface-variant: var(--color-neutral-variant);
    --color-sf-on-surface: var(--color-neutral-900);
    --color-sf-on-surface-variant: var(--color-neutral-600);
    --color-sf-background: var(--color-sf-surface);
    --color-sf-on-background: var(--color-neutral-900);
    /* Outline */
    --color-sf-outline: var(--color-neutral-400);
    --color-sf-outline-variant: var(--color-neutral-200);
    /* Semantic */
    --color-sf-error: var(--color-error-500);
    --color-sf-error-container: var(--color-error-50);
    --color-sf-on-error: var(--color-neutral-0);
    --color-sf-on-error-container: var(--color-brand-900);
    --color-sf-success: var(--color-success-500);
    --color-sf-success-container: var(--color-success-50);
    --color-sf-on-success: var(--color-neutral-0);
    --color-sf-on-success-container: var(--color-brand-900);
    --color-sf-warning: var(--color-warning-500);
    --color-sf-warning-container: var(--color-warning-50);
    --color-sf-on-warning: var(--color-neutral-0);
    --color-sf-on-warning-container: var(--color-brand-900);
    --color-sf-info: var(--color-info-500);
    --color-sf-info-container: var(--color-brand-50);
    --color-sf-on-info: var(--color-neutral-0);
    --color-sf-on-info-container: var(--color-brand-900);
    /* Inverse / focus */
    --color-sf-inverse-surface: var(--color-inverse-surface);
    --color-sf-inverse-on-surface: var(--color-inverse-on-surface);
    --color-sf-inverse-primary: var(--color-inverse-primary);
    --color-sf-shadow: #000000;
    --color-sf-scrim: #000000;
    --color-sf-shadow-focus-ring1: 0 0 0 2px var(--color-neutral-0), 0 0 0 4px rgba(14, 68, 122, 0.45);
    /* Misc */
    --color-sf-surface-tint-color: var(--color-brand-600);
    --color-sf-spreadsheet-gridline: var(--color-sf-surface-variant);
    --color-sf-diagram-palette-background: var(--color-sf-white);
    --color-sf-success-text: var(--color-neutral-0);
    --color-sf-warning-text: var(--color-neutral-0);
    --color-sf-danger-text: var(--color-neutral-0);
    --color-sf-info-text: var(--color-neutral-0);
    --color-sf-content-text-color-alt2: var(--color-sf-on-secondary-container);
    --color-sf-secondary-bg-color: var(--color-sf-surface);
    /* ─────────────────────────────────────────────────────────────────
     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;
    --state-focus: 0.12;
    --state-pressed: 0.12;
    --state-dragged: 0.16;
    --state-disabled: 0.38;
    /* ─────────────────────────────────────────────────────────────────
     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: 14px; /* explicit, matches html base */
    line-height: 1.5;
    color: var(--fg-1);
    -webkit-font-smoothing: antialiased;
}
}