:root {

  --green-50:  #f0fdf4;
  --green-400: #4ADE80;
  --green-500: #22c55e;

  --forest-900: #1A3C34;
  --forest-800: #234e44;
  --forest-95:  rgba(26, 60, 52, 0.95);
  --forest-90:  rgba(26, 60, 52, 0.90);
  --forest-55:  rgba(26, 60, 52, 0.55);
  --forest-70:  rgba(26, 60, 52, 0.70);
  --forest-60:  rgba(26, 60, 52, 0.60);
  --forest-30:  rgba(26, 60, 52, 0.30);
  --forest-20:  rgba(26, 60, 52, 0.20);
  --forest-10:  rgba(26, 60, 52, 0.10);
  --forest-08:  rgba(26, 60, 52, 0.08);
  --forest-06:  rgba(26, 60, 52, 0.06);
  --forest-05:  rgba(26, 60, 52, 0.05);
  --forest-03:  rgba(26, 60, 52, 0.03);

  --white:       #ffffff;
  --bg-light:    #ffffff;

  --white-03:    rgba(255, 255, 255, 0.03);
  --white-05:    rgba(255, 255, 255, 0.05);
  --white-08:    rgba(255, 255, 255, 0.08);
  --white-10:    rgba(255, 255, 255, 0.10);
  --white-20:    rgba(255, 255, 255, 0.20);
  --gray-200:    #e5e7eb;

  --error:              #ef4444;
  --error-bg:           rgba(239, 68, 68, 0.08);
  --error-border:       rgba(239, 68, 68, 0.25);
  --error-border-strong:rgba(239, 68, 68, 0.60);
  --error-focus-ring:   0 0 0 3px rgba(239, 68, 68, 0.10);
  --error-text:         #b91c1c;

  --color-primary:      var(--green-400);
  --color-primary-dark: var(--green-500);
  --color-forest:       var(--forest-900);
  --color-forest-light: var(--forest-800);
  --color-bg-light:     var(--bg-light);
  --color-white:        var(--white);
  --color-gray-light:   var(--gray-200);

  --fg1:   var(--forest-900);
  --fg2:   var(--forest-60);
  --fg3:   var(--forest-30);
  --fg-on-dark: #ffffff;
  --fg-on-dark-muted: rgba(255,255,255,0.60);

  --surface-page:   var(--bg-light);
  --surface-card:   var(--white);
  --surface-muted:  var(--forest-03);
  --surface-halo:   radial-gradient(circle at 82% 78%, var(--forest-05) 0%, var(--forest-03) 24%, transparent 56%);
  --surface-dark:   var(--forest-900);
  --surface-header: rgba(255, 255, 255, 0.85);

  --border-subtle:  var(--forest-08);
  --border-default: var(--forest-10);
  --border-hover:   rgba(74, 222, 128, 0.45);
  --badge-bg:       rgba(74, 222, 128, 0.12);
  --badge-border:   rgba(74, 222, 128, 0.28);

  --font-main:    'Montserrat', sans-serif;
  --font-icons:   'Material Symbols Outlined';

  --text-hero:    clamp(2.5rem, 5vw, 3.5rem);
  --text-h2:      clamp(2rem, 4vw, 3rem);
  --text-h2-sm:   2rem;
  --text-display: 5rem;
  --text-h3:      1.2rem;

  --text-statement: clamp(1.25rem, 2.2vw, 1.6rem);
  --text-lead:    1.125rem;
  --text-body:    1rem;
  --text-sm:      0.9rem;
  --text-xs:      0.8rem;

  --icon-xs:   0.875rem;
  --icon-sm:   1rem;
  --icon-base: 1.1rem;
  --icon-md:   1.25rem;
  --icon-lg:   1.5rem;
  --icon-xl:   2rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;
  --weight-black:   900;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --tracking-badge:  0.1em;
  --tracking-link:   0.08em;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;

  --logo-icon-h: 44px;
  --logo-icon-w: auto;

  --logo-lockup-w: 144px;

  --space-none: 0;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --tap-target-min: 2.75rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 6rem;

  --width-max:       1280px;
  --header-height:   80px;
  --container-px:    1.5rem;
  --container-px-md: 2rem;

  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-pill: 999px;

  --shadow-card-hover:    0 24px 40px -18px rgba(26, 60, 52, 0.22);
  --shadow-project-hover: 0 28px 48px -16px rgba(26, 60, 52, 0.35);
  --shadow-card:
    0 2px 4px rgba(26, 60, 52, 0.06),
    0 12px 24px -8px rgba(26, 60, 52, 0.12);
  --shadow-screen:
    inset 0 1px 0 var(--white-20),
    0 2px 6px rgba(26, 60, 52, 0.10),
    0 28px 56px -20px rgba(26, 60, 52, 0.28);
  --shadow-glow:       0 0 15px rgba(74, 222, 128, 0.30);
  --shadow-glow-hover: 0 0 18px rgba(74, 222, 128, 0.40);
  --focus-ring:        0 0 0 3px rgba(74, 222, 128, 0.10);

  --ease-card:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-header:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-scroll:   cubic-bezier(0.215, 0.61, 0.355, 1);

  --ease-elastic:  cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --duration-press:  0.16s;
  --duration-fast:   0.2s;
  --duration-base:   0.3s;
  --duration-medium: 0.4s;
  --duration-slow:   0.6s;
  --duration-reveal: 0.8s;

  --duration-page-fade: 0.25s;

  --duration-sonar:  1.8s;

  --duration-flash:  2.4s;

  --press-scale:     0.97;

  --press-scale-icon: 0.92;

  --reveal-shift:    30px;
  --reveal-shift-sm: 16px;

  --perspective-screen: 1200px;
  --tilt-screen:        6deg;

  --filter-logo-forest: brightness(0) saturate(100%) invert(18%) sepia(13%) saturate(2227%) hue-rotate(124deg) brightness(93%) contrast(93%);
  --filter-logo-white:  brightness(0) invert(1);

  --blur-glass:     blur(20px);
  --saturate-glass: saturate(180%);
  --surface-glass:  rgba(255, 255, 255, 0.72);

  --sheet-radius:    1.375rem;
  --sheet-row-h:     3.875rem;
  --sheet-grabber-w: 2.375rem;
  --sheet-grabber-h: 0.3125rem;
  --surface-sheet:   rgba(255, 255, 255, 0.86);
  --blur-sheet:      blur(28px);
  --scrim-nav:       rgba(11, 27, 23, 0.42);
  --shadow-sheet:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 -20px 44px -26px rgba(26, 60, 52, 0.60);
}

body {
  font-family: var(--font-main);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background-color: var(--surface-page);
}

h1 {
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--fg1);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

p {
  line-height: var(--leading-normal);
  color: var(--fg1);
}

p.lead {
  font-size: var(--text-lead);
  color: var(--fg2);
}

small, .text-sm {
  font-size: var(--text-sm);
}

.label-upper {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-badge);
  color: var(--fg1);
}

.text-highlight {
  color: var(--color-primary);
}

.text-gradient {
  background: linear-gradient(to right, var(--color-forest), var(--color-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}