@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Neutrals */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8F7;
  --neutral-100: #EFF1EF;
  --neutral-150: #E7EAE8;
  --neutral-200: #DDE1DE;
  --neutral-300: #CAD0CC;
  --neutral-400: #A4ABA6;
  --neutral-500: #7B837D;
  --neutral-600: #565E58;
  --neutral-700: #3B423D;
  --neutral-800: #262B27;
  --neutral-900: #161A17;
  --neutral-950: #0D100E;

  /* Brand green */
  --green-50:  #ECF4EF;
  --green-100: #D5E8DC;
  --green-200: #A9CFB7;
  --green-300: #71B08C;
  --green-400: #3E8E61;
  --green-500: #1F6E45;
  --green-600: #155739;
  --green-700: #104530;
  --green-800: #0B3224;
  --green-900: #072319;
  --green-950: #04140F;

  /* Status */
  --amber-500:  #E0922E;
  --amber-50:   #FBF1E3;
  --coral-500:  #DA5A57;
  --coral-50:   #FBEAEA;
  --azure-500:  #3B73C4;
  --azure-50:   #E9F0FA;
  --leaf-500:   #4FA13D;
  --leaf-50:    #EDF6EA;

  /* Semantic surfaces */
  --surface-page:        var(--neutral-0);
  --surface-card:        var(--neutral-0);
  --surface-sunken:      var(--neutral-50);
  --surface-raised:      var(--neutral-0);
  --surface-subtle:      var(--neutral-100);
  --surface-accent-soft: var(--green-50);
  --surface-inverse:     var(--green-900);
  --surface-inverse-2:   var(--neutral-950);

  /* Text */
  --text-primary:       var(--neutral-900);
  --text-secondary:     var(--neutral-600);
  --text-muted:         var(--neutral-500);
  --text-faint:         var(--neutral-400);
  --text-on-accent:     var(--neutral-0);
  --text-on-inverse:    #EDF0EE;
  --text-inverse-muted: #9FB3A9;
  --text-link:          var(--green-600);
  --text-link-hover:    var(--green-800);

  /* Borders */
  --border-subtle:  var(--neutral-150);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-inverse: rgba(255,255,255,0.12);
  --divider:        var(--neutral-150);

  /* Accent */
  --accent:           var(--green-700);
  --accent-hover:     var(--green-800);
  --accent-active:    var(--green-900);
  --accent-strong:    var(--green-500);
  --accent-soft-bg:   var(--green-50);
  --accent-soft-text: var(--green-700);
  --focus-ring:       var(--green-500);

  /* Status semantic */
  --status-success:    var(--leaf-500);
  --status-success-bg: var(--leaf-50);
  --status-warning:    var(--amber-500);
  --status-warning-bg: var(--amber-50);
  --status-danger:     var(--coral-500);
  --status-danger-bg:  var(--coral-50);
  --status-info:       var(--azure-500);
  --status-info-bg:    var(--azure-50);

  /* Typography */
  --font-sans:    'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  2.875rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.75rem;
  --text-6xl:  6rem;

  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.18em;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-padding-y: clamp(2.5rem, 5vw, 5rem);
  --container-max:     1200px;
  --container-wide:    1320px;
  --container-pad:     clamp(1.25rem, 4vw, 2.5rem);

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-card:    var(--radius-lg);
  --radius-control: var(--radius-sm);

  --border-width:        1px;
  --border-width-strong: 1.5px;

  --shadow-xs:     0 1px 2px rgba(13,16,14,0.04);
  --shadow-sm:     0 1px 3px rgba(13,16,14,0.06), 0 1px 2px rgba(13,16,14,0.04);
  --shadow-md:     0 6px 16px -4px rgba(13,16,14,0.08), 0 2px 6px -2px rgba(13,16,14,0.05);
  --shadow-lg:     0 18px 40px -12px rgba(13,16,14,0.12), 0 6px 14px -8px rgba(13,16,14,0.08);
  --shadow-accent: 0 12px 30px -8px rgba(16,69,48,0.30);
  --ring-focus:    0 0 0 3px rgba(31,110,69,0.28);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   420ms;
  --duration-reveal: 1100ms;

  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1500;
}