@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&display=swap');

:root {
  /* Colors */
  --color-surface: #f8f9fa;
  --color-surface-dim: #d9dadb;
  --color-surface-bright: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f4f5;
  --color-surface-container: #edeeef;
  --color-surface-container-high: #e7e8e9;
  --color-surface-container-highest: #e1e3e4;
  --color-on-surface: #191c1d;
  --color-on-surface-variant: #404943;
  --color-inverse-surface: #2e3132;
  --color-inverse-on-surface: #f0f1f2;
  --color-outline: #707973;
  --color-outline-variant: #bfc9c1;
  --color-surface-tint: #2c694e;
  --color-primary: #0f5238;
  --color-on-primary: #ffffff;
  --color-primary-container: #2d6a4f;
  --color-on-primary-container: #a8e7c5;
  --color-inverse-primary: #95d4b3;
  --color-secondary: #2b694d;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #b0f1cd;
  --color-on-secondary-container: #327053;
  --color-tertiary: #274f3d;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #3f6754;
  --color-on-tertiary-container: #b7e3cb;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-background: #f8f9fa;
  --color-on-background: #191c1d;
  --color-surface-variant: #e1e3e4;
  --color-alert-red: #ba1a1a;
  --color-success-green: #95d4b3;

  /* Typography scale */
  --font-family: 'Hanken Grotesk', system-ui, sans-serif;
  --text-display-lg-size: 40px;
  --text-display-lg-weight: 700;
  --text-display-lg-lh: 48px;
  --text-display-lg-ls: -0.02em;
  --text-headline-lg-size: 32px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-lh: 40px;
  --text-headline-lg-ls: -0.01em;
  --text-headline-md-size: 24px;
  --text-headline-md-weight: 600;
  --text-headline-md-lh: 32px;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-lh: 28px;
  --text-body-lg-size: 16px;
  --text-body-lg-weight: 400;
  --text-body-lg-lh: 24px;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-lh: 20px;
  --text-body-sm-size: 12px;
  --text-body-sm-weight: 400;
  --text-body-sm-lh: 18px;
  --text-label-caps-size: 11px;
  --text-label-caps-weight: 700;
  --text-label-caps-lh: 16px;
  --text-label-caps-ls: 0.06em;
  --text-label-numeric-size: 13px;
  --text-label-numeric-weight: 600;
  --text-label-numeric-lh: 16px;

  /* Spacing */
  --sidebar-width: 260px;
  --edge-margin: 24px;
  --gutter: 16px;
  --widget-gap: 24px;
  --data-row-padding: 12px;

  /* Radii */
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-layer2: 0px 8px 24px rgba(0, 0, 0, 0.04);
}

/* ── Dark mode overrides ── */
:root[data-theme="dark"] {
  --color-background:                #0d1110;
  --color-surface:                   #141917;
  --color-surface-dim:               #0b0f0d;
  --color-surface-bright:            #1e2520;
  --color-surface-container-lowest:  #090e0c;
  --color-surface-container-low:     #161d19;
  --color-surface-container:         #1a211d;
  --color-surface-container-high:    #242c27;
  --color-surface-container-highest: #2e3630;
  --color-on-surface:                #dce5de;
  --color-on-surface-variant:        #9eab9f;
  --color-inverse-surface:           #dce5de;
  --color-inverse-on-surface:        #2e3630;
  --color-outline:                   #6b7a6d;
  --color-outline-variant:           #2d3d30;
  --color-primary:                   #7fc9a3;
  --color-on-primary:                #0a3320;
  --color-primary-container:         #1a4a34;
  --color-on-primary-container:      #a8e7c5;
  --color-secondary:                 #7fc9a3;
  --color-on-secondary:              #0a3320;
  --color-secondary-container:       #1a4a34;
  --color-on-secondary-container:    #a8e7c5;
  --color-error:                     #ffb4ab;
  --color-on-error:                  #690005;
  --color-error-container:           #93000a;
  --color-on-error-container:        #ffdad6;
  --color-alert-red:                 #ff8a80;
  --color-success-green:             #7fc9a3;
  --shadow-layer2:                   0px 8px 24px rgba(0,0,0,0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Ensure [hidden] always wins over inline display styles */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  font-family: var(--font-family);
  background: var(--color-background);
  color: var(--color-on-surface);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  -webkit-font-smoothing: antialiased;
}

/* Utility classes */
.text-display-lg  { font-size: var(--text-display-lg-size); font-weight: var(--text-display-lg-weight); line-height: var(--text-display-lg-lh); letter-spacing: var(--text-display-lg-ls); }
.text-headline-lg { font-size: var(--text-headline-lg-size); font-weight: var(--text-headline-lg-weight); line-height: var(--text-headline-lg-lh); letter-spacing: var(--text-headline-lg-ls); }
.text-headline-md { font-size: var(--text-headline-md-size); font-weight: var(--text-headline-md-weight); line-height: var(--text-headline-md-lh); }
.text-headline-sm { font-size: var(--text-headline-sm-size); font-weight: var(--text-headline-sm-weight); line-height: var(--text-headline-sm-lh); }
.text-body-lg     { font-size: var(--text-body-lg-size); font-weight: var(--text-body-lg-weight); line-height: var(--text-body-lg-lh); }
.text-body-md     { font-size: var(--text-body-md-size); font-weight: var(--text-body-md-weight); line-height: var(--text-body-md-lh); }
.text-body-sm     { font-size: var(--text-body-sm-size); font-weight: var(--text-body-sm-weight); line-height: var(--text-body-sm-lh); }
.text-label-caps  { font-size: var(--text-label-caps-size); font-weight: var(--text-label-caps-weight); line-height: var(--text-label-caps-lh); letter-spacing: var(--text-label-caps-ls); text-transform: uppercase; }
.text-label-num   { font-size: var(--text-label-numeric-size); font-weight: var(--text-label-numeric-weight); line-height: var(--text-label-numeric-lh); font-variant-numeric: tabular-nums; }

.color-on-surface-variant { color: var(--color-on-surface-variant); }
.color-primary            { color: var(--color-primary); }
.color-error              { color: var(--color-alert-red); }
.color-success            { color: var(--color-success-green); }