/* =========================================
   GLOBAL TOKENS & BASE
========================================= */

/* ---------- PRIMITIVES (keep your values) ---------- */
:root {
  /* Color primitives (sample values — keep yours) */
  --neutral-warmgrey-primative-neutral-warmgrey-91: #EFEAE4;
  --neutral-warmgrey-primative-neutral-warmgrey-82: #E6DED4;
  --neutralcoolgrey-primative-neutral-coolgrey-59: #8E959E;
  --neutralcoolgrey-primative-neutral-coolgrey-34: #51565D;
  --greens-primative-green-29: #4A5E4A;
  --neutralgreens-primative-neutral-green-53: #7F927F;
  --neutralgreens-primative-neutral-green-69: #AFC4AF;

  --greens-primative-green-34: #567456;
  --greens-primative-green-42: #6E8A6E;
  --greens-primative-green-52: #879F87;

  --bluefeedback-primative-blue-feedback-23: #2A6FDB;
  --bluefeedback-primative-blue-feedback-32: #3F83E6;
  --bluefeedback-primative-blue-feedback-42: #5798F2;

  --redfeedback-primative-red-feedback-33: #C94A4A;
  --redfeedback-primative-red-feedback-49: #E05C5C;
  --redfeedback-primative-red-feedback-66: #F07F7F;

  --greenfeedback-primative-green-feedback-26: #2F9E73;
  --greenfeedback-primative-green-feedback-34: #39B083;
  --greenfeedback-primative-green-feedback-43: #58C09A;

  /* Spacing scale */
  --spacing-tokens-spacing-xs: 4px;
  --spacing-tokens-spacing-s:  8px;
  --spacing-tokens-spacing-m:  16px;
  --spacing-tokens-spacing-l:  24px;
  --spacing-tokens-spacing-xl: 32px;

  /* Radii */
  --spacing-tokens-radius-button: 4px;
  --spacing-tokens-radius-card:   4px;

  /* Type scale & families */
  --font-sans-primitive: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif-primitive: Georgia, "Times New Roman", serif;

  --size-100-primitive: .95rem;
  --size-200-primitive: 1.05rem;
  --size-300-primitive: 1.125rem;
  --size-400-primitive: 1.375rem;
  --size-500-primitive: 1.75rem;
  --size-600-primitive: clamp(2rem, 4vw, 2.5rem);

  /* Shadows & layout */
  --shadow-1-primitive:    0 8px 28px rgba(0,0,0,.08);
  --shadow-soft-primitive: 0 6px 18px rgba(0,0,0,.05);
  --container-max-primitive: 980px;
}

/* ---------- SEMANTIC TOKENS (aliases) ---------- */
:root{
  /* Surfaces & borders */
  --surface-default:  var(--neutral-warmgrey-primative-neutral-warmgrey-91);
  --surface-subtle:   var(--neutral-warmgrey-primative-neutral-warmgrey-82);
  --surface-disabled: var(--neutralcoolgrey-primative-neutral-coolgrey-59);

  --border-default:   var(--greens-primative-green-29);
  --border-disabled:  var(--neutralgreens-primative-neutral-green-53);
  --border-strong:    var(--neutralgreens-primative-neutral-green-53);

  /* Text */
  --text-title:    var(--greens-primative-green-29);
  --text-body:     var(--greens-primative-green-29);
  --text-subtitle: var(--neutral-warmgrey-primative-neutral-warmgrey-91);
  --text-caption:  var(--greens-primative-green-29);
  --text-negative: var(--redfeedback-primative-red-feedback-33);
  --text-disabled: var(--neutralcoolgrey-primative-neutral-coolgrey-34);

  /* Brand */
  --brand-primary-default: var(--neutral-warmgrey-primative-neutral-warmgrey-91);
  --brand-primary-hover:   var(--greens-primative-green-29);
  --brand-primary-active:  var(--greens-primative-green-29);
  --brand-primary-focus:   var(--neutralgreens-primative-neutral-green-69);

  --brand-secondary-default: var(--greens-primative-green-29);
  --brand-secondary-hover:   var(--greens-primative-green-29);
  --brand-secondary-active:  var(--neutralgreens-primative-neutral-green-53);
  --brand-secondary-focus:   var(--neutralgreens-primative-neutral-green-53);

  /* Feedback */
  --feedback-success-default: var(--greens-primative-green-42);
  --feedback-success-hover:   var(--greens-primative-green-52);
  --feedback-success-active:  var(--greens-primative-green-34);

  --feedback-warning-default: var(--bluefeedback-primative-blue-feedback-23);
  --feedback-warning-hover:   var(--bluefeedback-primative-blue-feedback-32);
  --feedback-warning-active:  var(--bluefeedback-primative-blue-feedback-42);

  --feedback-error-default: var(--redfeedback-primative-red-feedback-33);
  --feedback-error-hover:   var(--redfeedback-primative-red-feedback-49);
  --feedback-error-active:  var(--redfeedback-primative-red-feedback-66);

  --feedback-info-default: var(--greenfeedback-primative-green-feedback-26);
  --feedback-info-hover:   var(--greenfeedback-primative-green-feedback-34);
  --feedback-info-active:  var(--greenfeedback-primative-green-feedback-43);

  /* Convenience aliases for components */
  --color-bg:         var(--surface-default);
  --color-surface:    var(--surface-subtle);
  --color-surface-dis:var(--surface-disabled);

  --color-border:         var(--border-default);
  --color-border-dis:     var(--border-disabled);
  --color-border-strong:  var(--border-strong);

  --color-text:        var(--text-body);
  --color-text-title:  var(--text-title);
  --color-text-subtle: var(--text-subtitle);
  --color-text-caption:var(--text-caption);

  --color-primary:        var(--brand-primary-default);
  --color-primary-hover:  var(--brand-primary-hover);
  --color-primary-active: var(--brand-primary-active);
  --color-primary-focus:  var(--brand-primary-focus);

  --color-secondary:        var(--brand-secondary-default);
  --color-secondary-hover:  var(--brand-secondary-hover);
  --color-secondary-active: var(--brand-secondary-active);
  --color-secondary-focus:  var(--brand-secondary-focus);

  /* Type, spacing, radius, shadow, layout */
  --font-sans:  var(--font-sans-primitive);
  --font-serif: var(--font-serif-primitive);

  --size-100: var(--size-100-primitive);
  --size-200: var(--size-200-primitive);
  --size-300: var(--size-300-primitive);
  --size-400: var(--size-400-primitive);
  --size-500: var(--size-500-primitive);
  --size-600: var(--size-600-primitive);

  --space-xs: var(--spacing-tokens-spacing-xs);
  --space-s:  var(--spacing-tokens-spacing-s);
  --space-m:  var(--spacing-tokens-spacing-m);
  --space-l:  var(--spacing-tokens-spacing-l);
  --space-xl: var(--spacing-tokens-spacing-xl);
  --space-xxl: 64px; /* used only for hero spacing rhythm like your shot */

  --radius-button: var(--spacing-tokens-radius-button);
  --radius-card:   var(--spacing-tokens-radius-card);

  --shadow-1:    var(--shadow-1-primitive);
  --shadow-soft: var(--shadow-soft-primitive);

  --container-max: var(--container-max-primitive);

  /* Nav text over header art */
  --nav-link: #F4F1EC;
  --nav-link-hover: #FFFFFF;
}

/* ---------- Base ---------- */
*,
*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font: 400 var(--size-200)/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ display:block; height:auto; }
a{ color:inherit; text-decoration:none;transform: translateY(-60);}

.container{
  margin-inline: auto;
  padding-inline: 18px;
}
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); }