/* =========================================================================
   SG Sicurezza - Colors & Typography Tokens
   Premium, enterprise SaaS for safety / compliance management.
   ========================================================================= */

:root {
  /* ---------- Brand - Primary blues (sampled from the SG cloud + gear logo) */
  --sg-blue-50:  #eef4ff;
  --sg-blue-100: #dde9ff;
  --sg-blue-200: #bcd2ff;
  --sg-blue-300: #8eb0ff;
  --sg-blue-400: #5a87ff;
  --sg-blue-500: #2b5fff;   /* interactive primary */
  --sg-blue-600: #1a47ec;
  --sg-blue-700: #0030d0;   /* logo dark blue (SG / gear) */
  --sg-blue-800: #0a2599;
  --sg-blue-900: #081a66;
  --sg-blue-950: #04102e;

  /* ---------- Brand - Azure / Cloud (sampled from cloud silhouette) */
  --sg-azure-50:  #effaff;
  --sg-azure-100: #def3ff;
  --sg-azure-200: #b6e7ff;
  --sg-azure-300: #82d6f7;
  --sg-azure-400: #50c0f0;   /* logo cloud azure */
  --sg-azure-500: #2aa8e0;
  --sg-azure-600: #1488c2;
  --sg-azure-700: #0e6c9e;
  --sg-azure-800: #0d567c;
  --sg-azure-900: #0c4664;

  /* ---------- Neutrals - cool, slightly bluish (enterprise SaaS feel) */
  --sg-gray-0:   #ffffff;
  --sg-gray-50:  #f7f9fc;
  --sg-gray-100: #eef2f7;
  --sg-gray-200: #e2e8f0;
  --sg-gray-300: #cbd4e0;
  --sg-gray-400: #98a4b6;
  --sg-gray-500: #6b7689;
  --sg-gray-600: #4b5567;
  --sg-gray-700: #343c4d;
  --sg-gray-800: #1f2533;
  --sg-gray-900: #121724;
  --sg-gray-950: #0a0d17;

  /* ---------- Semantic - modulated to live next to brand blue */
  --sg-success-50:  #ecfdf3;
  --sg-success-100: #d1fadf;
  --sg-success-500: #12b76a;
  --sg-success-600: #039855;
  --sg-success-700: #027a48;

  --sg-warning-50:  #fffaeb;
  --sg-warning-100: #fef0c7;
  --sg-warning-500: #f79009;
  --sg-warning-600: #dc6803;
  --sg-warning-700: #b54708;

  --sg-danger-50:   #fef3f2;
  --sg-danger-100:  #fee4e2;
  --sg-danger-500:  #f04438;
  --sg-danger-600:  #d92d20;
  --sg-danger-700:  #b42318;

  --sg-info-50:     #eff8ff;
  --sg-info-100:    #d1e9ff;
  --sg-info-500:    #2e90fa;
  --sg-info-600:    #1570ef;
  --sg-info-700:    #175cd3;

  /* ---------- Semantic / role tokens (light theme defaults) */
  --bg-canvas:      var(--sg-gray-50);
  --bg-surface:     var(--sg-gray-0);
  --bg-subtle:      var(--sg-gray-100);
  --bg-muted:       var(--sg-gray-200);
  --bg-inverse:     var(--sg-gray-900);
  --bg-brand:       var(--sg-blue-700);
  --bg-brand-soft:  var(--sg-blue-50);

  --fg-default:     var(--sg-gray-900);
  --fg-muted:       var(--sg-gray-600);
  --fg-subtle:      var(--sg-gray-500);
  --fg-disabled:    var(--sg-gray-400);
  --fg-onbrand:     #ffffff;
  --fg-brand:       var(--sg-blue-700);
  --fg-link:        var(--sg-blue-600);

  --border-default: var(--sg-gray-200);
  --border-strong:  var(--sg-gray-300);
  --border-brand:   var(--sg-blue-500);
  --border-focus:   var(--sg-blue-500);

  /* ---------- Gradients - used sparingly for hero / brand surfaces */
  --grad-brand:    linear-gradient(135deg, #0030d0 0%, #1a47ec 45%, #2aa8e0 100%);
  --grad-azure:    linear-gradient(180deg, #82d6f7 0%, #50c0f0 50%, #2aa8e0 100%);
  --grad-deep:     linear-gradient(180deg, #04102e 0%, #081a66 60%, #0a2599 100%);
  --grad-mesh:     radial-gradient(at 20% 10%, #1a47ec 0px, transparent 50%),
                   radial-gradient(at 80% 0%, #2aa8e0 0px, transparent 45%),
                   radial-gradient(at 50% 100%, #0030d0 0px, transparent 60%);

  /* ---------- Elevation / shadow system (cool tint, never neutral black) */
  --shadow-xs:  0 1px 2px 0 rgba(16, 24, 40, .05);
  --shadow-sm:  0 1px 3px 0 rgba(16, 24, 40, .07), 0 1px 2px -1px rgba(16, 24, 40, .06);
  --shadow-md:  0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05);
  --shadow-lg:  0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .04);
  --shadow-xl:  0 20px 24px -4px rgba(16, 24, 40, .10), 0 8px 8px -4px rgba(16, 24, 40, .04);
  --shadow-2xl: 0 32px 64px -12px rgba(8, 26, 102, .18);
  --shadow-brand: 0 8px 24px -6px rgba(0, 48, 208, .35);
  --shadow-focus: 0 0 0 4px rgba(43, 95, 255, .18);
  --shadow-inset: inset 0 1px 2px 0 rgba(16, 24, 40, .06);

  /* ---------- Border radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* ---------- Spacing - 4pt scale */
  --sp-0:  0px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Layout - dashboard chrome */
  --dash-sidebar-w:        264px;
  --dash-sidebar-w-collapsed: 72px;
  --dash-topbar-h:         60px;
  --dash-content-max:      1440px;
  --dash-gutter:           24px;

  /* ---------- Z-index */
  --z-base:       0;
  --z-raised:     10;
  --z-sticky:     20;
  --z-dropdown:   30;
  --z-overlay:    40;
  --z-modal:      50;
  --z-toast:      60;
  --z-tooltip:    70;

  /* ---------- Motion */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* =====================================================================
     TYPOGRAPHY
     ===================================================================== */

  /* Font stacks
     Plus Jakarta Sans - display / headings (modern, geometric, slightly humanist)
     Inter             - body (proven legibility for dense data UIs)
     JetBrains Mono    - code / IDs / numerals where tabular precision matters
  */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale (px). Line-heights are *unitless* multipliers to scale safely. */
  --text-display-size:   48px;  --text-display-lh: 1.05; --text-display-tracking: -0.025em;
  --text-h1-size:        36px;  --text-h1-lh:      1.12; --text-h1-tracking:      -0.02em;
  --text-h2-size:        28px;  --text-h2-lh:      1.18; --text-h2-tracking:      -0.015em;
  --text-h3-size:        22px;  --text-h3-lh:      1.25; --text-h3-tracking:      -0.01em;
  --text-h4-size:        18px;  --text-h4-lh:      1.33; --text-h4-tracking:      -0.005em;
  --text-body-lg-size:   16px;  --text-body-lg-lh: 1.55;
  --text-body-size:      14px;  --text-body-lh:    1.55;
  --text-body-sm-size:   13px;  --text-body-sm-lh: 1.50;
  --text-caption-size:   12px;  --text-caption-lh: 1.40;
  --text-label-size:     12px;  --text-label-lh:   1.30; --text-label-tracking: 0.04em;
  --text-button-size:    14px;  --text-button-lh:  1.20;
  --text-mono-size:      13px;  --text-mono-lh:    1.45;
}

/* =========================================================================
   DARK THEME (apply via `data-theme="dark"` on <html> or any container)
   ========================================================================= */
[data-theme="dark"] {
  --bg-canvas:      var(--sg-gray-950);
  --bg-surface:     #0f1422;
  --bg-subtle:      #161c2c;
  --bg-muted:       #1d2438;
  --bg-inverse:     var(--sg-gray-50);
  --bg-brand:       var(--sg-blue-600);
  --bg-brand-soft:  rgba(43, 95, 255, .12);

  --fg-default:     #eef2f7;
  --fg-muted:       #a3adc2;
  --fg-subtle:      #7e889c;
  --fg-disabled:    #4b5567;
  --fg-brand:       #8eb0ff;
  --fg-link:        #8eb0ff;

  --border-default: #1f2738;
  --border-strong:  #2a334a;
  --border-brand:   var(--sg-blue-400);

  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, .35);
  --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, .45);
  --shadow-md:  0 4px 12px -2px rgba(0, 0, 0, .5);
  --shadow-lg:  0 16px 32px -8px rgba(0, 0, 0, .55);
  --shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, .6);
  --shadow-brand: 0 8px 24px -6px rgba(43, 95, 255, .5);
  --shadow-focus: 0 0 0 4px rgba(142, 176, 255, .25);
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these directly: <h1 class="t-h1">...</h1>
   ========================================================================= */

html, body {
  font-family: var(--font-body);
  color: var(--fg-default);
  background: var(--bg-canvas);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display { font-family: var(--font-display); font-weight: 800; font-size: var(--text-display-size); line-height: var(--text-display-lh); letter-spacing: var(--text-display-tracking); }
.t-h1      { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1-size);      line-height: var(--text-h1-lh);      letter-spacing: var(--text-h1-tracking); }
.t-h2      { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2-size);      line-height: var(--text-h2-lh);      letter-spacing: var(--text-h2-tracking); }
.t-h3      { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3-size);      line-height: var(--text-h3-lh);      letter-spacing: var(--text-h3-tracking); }
.t-h4      { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4-size);      line-height: var(--text-h4-lh);      letter-spacing: var(--text-h4-tracking); }
.t-body-lg { font-family: var(--font-body);    font-weight: 400; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-lh); }
.t-body    { font-family: var(--font-body);    font-weight: 400; font-size: var(--text-body-size);    line-height: var(--text-body-lh); }
.t-body-sm { font-family: var(--font-body);    font-weight: 400; font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-lh); }
.t-caption { font-family: var(--font-body);    font-weight: 400; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--fg-muted); }
.t-label   { font-family: var(--font-body);    font-weight: 600; font-size: var(--text-label-size);   line-height: var(--text-label-lh);   letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--fg-muted); }
.t-button  { font-family: var(--font-body);    font-weight: 600; font-size: var(--text-button-size);  line-height: var(--text-button-lh); letter-spacing: -.005em; }
.t-mono    { font-family: var(--font-mono);    font-weight: 500; font-size: var(--text-mono-size);    line-height: var(--text-mono-lh); }
.t-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* element defaults */
.h1, h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1-size); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-tracking); margin: 0; }
.h2, h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2-size); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-tracking); margin: 0; }
.h3, h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h3-size); line-height: var(--text-h3-lh); margin: 0; }
.h4, h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h4-size); line-height: var(--text-h4-lh); margin: 0; }
p       { margin: 0 0 var(--sp-3) 0; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--text-mono-size); }

/* utility: subdued caption / "label above value" common in dashboards */
.kpi-label  { font: 600 12px/1.3 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); }
.kpi-value  { font: 700 32px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--fg-default); font-variant-numeric: tabular-nums; }
.kpi-value-sm { font: 700 22px/1.1 var(--font-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }