:root {
    --color-surface:                #f8f9fa;
  --color-surface-dim:            #d9dadb;
  --color-surface-bright:         #f8f9fa;
  --color-surface-lowest:         #ffffff;
  --color-surface-low:            #f3f4f5;
  --color-surface-container:      #edeeef;
  --color-surface-high:           #e7e8e9;
  --color-surface-highest:        #e1e3e4;
  --color-surface-variant:        #e1e3e4;
  --color-surface-ink:            #0F172A;

  --color-on-surface:             #191c1d;
  --color-on-surface-variant:     #45464c;

  --color-primary:                #000000;
  --color-on-primary:             #ffffff;
  --color-primary-container:      #141b2b;
  --color-on-primary-container:   #7d8497;

  --color-secondary:              #00687a;
  --color-on-secondary:           #ffffff;
  --color-secondary-container:    #57dffe;
  --color-on-secondary-container: #006172;
  --color-secondary-fixed:        #acedff;
  --color-secondary-fixed-dim:    #4cd7f6;

  --color-tertiary:               #000000;
  --color-on-tertiary:            #ffffff;
  --color-tertiary-container:     #0d1c2e;
  --color-on-tertiary-container:  #77859a;

  --color-background:             #f8f9fa;
  --color-on-background:          #191c1d;

  --color-outline:                #76777d;
  --color-outline-variant:        #c6c6cd;
  --color-border-subtle:          #E2E8F0;

  --color-growth-accent:          #10B981;
  --color-error:                  #ba1a1a;

    --color-cyan:                   #06B6D4;

    --font-sans:   'Inter', system-ui, sans-serif;

    --text-display-lg:         clamp(2.5rem, 5vw, 4rem);
  --text-headline-md:        clamp(1.75rem, 3vw, 2.5rem);
  --text-headline-sm:        clamp(1.25rem, 2vw, 1.75rem);
  --text-body-lg:            1.125rem;
  --text-body-md:            1rem;
  --text-label-md:           0.875rem;
  --text-label-sm:           0.75rem;

    --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

    --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

    --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-widest:   0.15em;

    --space-1:  0.5rem;     --space-2:  1rem;       --space-3:  1.5rem;     --space-4:  2rem;       --space-5:  2.5rem;     --space-6:  3rem;       --space-8:  4rem;       --space-10: 5rem;       --space-12: 6rem;       --space-16: 8rem;         --container-max:    1280px;
  --gutter-desktop:   4rem;     --gutter-mobile:    1.25rem;    --radius-sm:   0.25rem;
  --radius-base: 0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-full: 9999px;

    --shadow-card:    0 1px 3px rgba(17,24,39,0.04), 0 4px 20px rgba(17,24,39,0.05);
  --shadow-hover:   0 8px 30px rgba(17,24,39,0.10);
  --shadow-overlay: 0 20px 40px rgba(17,24,39,0.12);

    --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

    --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}