/* ============================================================
   tokens.css — Vaxa Labs Design System
   Three-layer architecture: Primitive → Semantic → Component
   Source: 20260622_figma-extract-v1.md (Figma Variables API + Plugin API)
   ============================================================ */

:root {

  /* ============================================================
     LAYER 1 — PRIMITIVES
     Raw values only. Never referenced directly in components.
     ============================================================ */

  /* Color — Green scale */
  --green-900: #0F2922;
  --green-800: #1B4D3E;
  --green-700: #2D5A4A;
  --green-600: #25A870;
  --green-500: #2ECC8A;
  --green-400: #5DD68A;
  --green-100: #C8F0D8;

  /* Color — Neutral scale */
  --neutral-900: #1A1F1D;
  --neutral-600: #6B7F78;
  --neutral-200: #EDF5F1;
  --neutral-100: #F5F2ED;
  --neutral-50:  #F8FBFA;
  --white:       #FFFFFF;

  /* Color — Border (alpha) */
  --border-light:  rgba(27, 77, 62, 0.15);
  --border-strong: rgba(27, 77, 62, 0.30);

  /* Font Family */
  --font-heading:   'Outfit', sans-serif;
  --font-body:      'Geist', sans-serif;
  --font-body-mono: 'Geist Mono', monospace;

  /* Font Size */
  --size-64: 64px;
  --size-48: 48px;
  --size-36: 36px;
  --size-32: 32px;
  --size-24: 24px;
  --size-20: 20px;
  --size-16: 16px;
  --size-14: 14px;
  --size-12: 12px;

  /* Font Weight */
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;

  /* Line Height (unitless — Figma % converted) */
  --leading-110: 1.1;
  --leading-115: 1.15;
  --leading-120: 1.2;
  --leading-130: 1.3;
  --leading-150: 1.5;
  --leading-160: 1.6;

  /* Letter Spacing (em — Figma % relative to font-size = em) */
  --tracking-n3:  -0.03em;
  --tracking-n2:  -0.02em;
  --tracking-n15: -0.015em;
  --tracking-n1:  -0.01em;
  --tracking-0:   0em;
  --tracking-p6:  0.06em;

  /* Spacing */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-112: 112px;
  --space-120: 120px;

  /* Radius */
  --radius-6:   6px;
  --radius-8:   8px;
  --radius-12:  12px;
  --radius-16:  16px;
  --radius-100: 100px;


  /* ============================================================
     LAYER 2 — SEMANTIC TOKENS
     Assign meaning to primitives. Reference primitives only.
     ============================================================ */

  /* --- Color --- */

  --color-brand-primary:        var(--green-800);
  --color-brand-accent:         var(--green-500);
  --color-brand-accent-hover:   var(--green-600);
  --color-brand-dark:           var(--green-900);
  --color-brand-subtle:         var(--green-100);

  --color-bg-default:           var(--neutral-200);
  --color-bg-warm:              var(--neutral-100);
  --color-bg-surface:           var(--neutral-50);
  --color-bg-inverse:           var(--green-800);
  --color-bg-dots:              var(--green-100);

  --color-text-default:         var(--neutral-900);
  --color-text-muted:           var(--neutral-600);
  --color-text-inverse:         var(--neutral-50);
  --color-text-accent:          var(--green-500);
  --color-text-heading:         var(--green-800);
  --color-text-heading-inverse: var(--neutral-50);

  --color-border-default:       var(--border-light);
  --color-border-strong:        var(--border-strong);

  --color-transparent:          transparent;

  /* --- Typography — size --- */
  /* One sub-token per property per scale level */

  --type-5xl-size:    var(--size-64);
  --type-5xl-font:    var(--font-heading);
  --type-5xl-weight:  var(--weight-700);
  --type-5xl-lh:      var(--leading-110);
  --type-5xl-ls:      var(--tracking-n3);

  --type-4xl-size:    var(--size-48);
  --type-4xl-font:    var(--font-heading);
  --type-4xl-weight:  var(--weight-700);
  --type-4xl-lh:      var(--leading-110);
  --type-4xl-ls:      var(--tracking-n3);

  --type-3xl-size:    var(--size-36);
  --type-3xl-font:    var(--font-heading);
  --type-3xl-weight:  var(--weight-700);
  --type-3xl-lh:      var(--leading-115);
  --type-3xl-ls:      var(--tracking-n2);

  --type-2xl-size:    var(--size-32);
  --type-2xl-font:    var(--font-heading);
  --type-2xl-weight:  var(--weight-700);
  --type-2xl-lh:      var(--leading-115);
  --type-2xl-ls:      var(--tracking-n2);

  --type-xl-size:     var(--size-24);
  --type-xl-font:     var(--font-heading);
  --type-xl-weight:   var(--weight-600);
  --type-xl-lh:       var(--leading-130);
  --type-xl-ls:       var(--tracking-n1);

  --type-lg-size:     var(--size-20);
  --type-lg-font:     var(--font-body);
  --type-lg-weight:   var(--weight-400);
  --type-lg-lh:       var(--leading-150);
  --type-lg-ls:       var(--tracking-n1);

  --type-base-size:   var(--size-16);
  --type-base-font:   var(--font-body);
  --type-base-weight: var(--weight-400);
  --type-base-lh:     var(--leading-150);
  --type-base-ls:     var(--tracking-n1);

  --type-sm-size:     var(--size-14);
  --type-sm-font:     var(--font-body-mono);
  --type-sm-weight:   var(--weight-700);
  --type-sm-lh:       var(--leading-150);
  --type-sm-ls:       var(--tracking-n1);

  --type-xs-size:     var(--size-12);
  --type-xs-font:     var(--font-body-mono);
  --type-xs-weight:   var(--weight-600);
  --type-xs-lh:       1;              /* 100% — no leading primitive at this value */
  --type-xs-ls:       var(--tracking-n2);

  /* Button text style (Figma Text Style, not a Variable — extracted from component) */
  --type-btn-size:    var(--size-16);
  --type-btn-font:    var(--font-body);
  --type-btn-weight:  var(--weight-600);
  --type-btn-lh:      var(--leading-150);
  --type-btn-ls:      var(--tracking-p6);

  /* --- Spacing --- */

  --space-xs:  var(--space-4);
  --space-sm:  var(--space-8);
  --space-3:   var(--space-12);
  --space-md:  var(--space-16);
  --space-lg:  var(--space-24);
  --space-xl:  var(--space-32);
  --space-2xl: var(--space-48);
  --space-3xl: var(--space-64);
  --space-4xl: var(--space-80);
  --space-5xl: var(--space-120);

  /* Purpose-specific spacing (no primitive equivalent — used directly as semantic) */
  --space-desktop-section-padding: var(--space-112);

  /* Focus ring and border (raw — no primitive equivalent) */
  --space-focus-ring-width:  2px;
  --space-focus-ring-offset: 3px;
  --space-border-width:      2px;

  /* --- Icon size --- */

  --size-icon-sm: var(--size-12);
  --size-icon-md: var(--size-16);

  /* --- Radius --- */

  --radius-sm:   var(--radius-6);
  --radius-md:   var(--radius-8);
  --radius-lg:   var(--radius-12);
  --radius-xl:   var(--radius-16);
  --radius-pill: var(--radius-100);


  /* ============================================================
     LAYER 3 — COMPONENT TOKENS
     Reference semantic tokens only. Never primitives or raw values.
     ============================================================ */

  /* --- Button — Light context --- */

  /* Primary / light */
  --btn-primary-bg:            var(--color-brand-primary);
  --btn-primary-bg-hover:      var(--color-brand-dark);
  --btn-primary-text:          var(--color-bg-warm);
  --btn-primary-radius:        var(--radius-md);

  /* Accent / light */
  --btn-accent-bg:             var(--color-brand-accent);
  --btn-accent-bg-hover:       var(--color-brand-accent-hover);
  --btn-accent-text:           var(--color-brand-dark);
  --btn-accent-radius:         var(--radius-md);

  /* Outline / light */
  --btn-outline-bg:            var(--color-transparent);
  --btn-outline-bg-hover:      var(--color-bg-warm);
  --btn-outline-border:        var(--color-brand-primary);
  --btn-outline-text:          var(--color-brand-primary);
  --btn-outline-radius:        var(--radius-md);

  /* Ghost / light */
  --btn-ghost-bg:              var(--color-transparent);
  --btn-ghost-bg-hover:        var(--color-bg-warm);
  --btn-ghost-text:            var(--color-brand-primary);
  --btn-ghost-radius:          var(--radius-md);

  /* --- Button — Dark context --- */

  /* Primary / dark */
  --btn-dark-primary-bg:       var(--color-bg-warm);
  --btn-dark-primary-bg-hover: var(--color-bg-default);
  --btn-dark-primary-text:     var(--color-brand-primary);
  --btn-dark-primary-radius:   var(--radius-md);

  /* Accent / dark */
  --btn-dark-accent-bg:        var(--color-brand-accent);
  --btn-dark-accent-bg-hover:  var(--color-brand-accent-hover);
  --btn-dark-accent-text:      var(--color-brand-dark);
  --btn-dark-accent-radius:    var(--radius-md);

  /* Outline / dark */
  --btn-dark-outline-bg:       var(--color-transparent);
  --btn-dark-outline-bg-hover: var(--color-brand-primary);
  --btn-dark-outline-border:   var(--color-bg-warm);
  --btn-dark-outline-text:     var(--color-bg-warm);
  --btn-dark-outline-radius:   var(--radius-md);

  /* --- Button Sizing --- */

  /* Large — md+ breakpoints (140×48px Figma spec) */
  --btn-lg-padding-v:    var(--space-sm);
  --btn-lg-padding-h:    var(--space-lg);
  --btn-lg-font-size:    var(--type-base-size);
  --btn-lg-icon-size:    var(--size-icon-md);

  /* Medium — xs/sm breakpoints */
  --btn-md-padding-v:    var(--space-xs);
  --btn-md-padding-h:    var(--space-md);
  --btn-md-font-size:    var(--type-sm-size);
  --btn-md-icon-size:    var(--size-icon-md);

  /* Small */
  --btn-sm-padding-v:    var(--space-xs);
  --btn-sm-padding-h:    var(--space-sm);
  --btn-sm-font-size:    var(--type-xs-size);
  --btn-sm-icon-size:    var(--size-icon-sm);

  /* Icon gap (icon to label) */
  --btn-icon-gap:        var(--space-xs);

  /* Shared border width */
  --btn-border-width:    var(--space-border-width);

  /* Focus ring — outline only, never box-shadow */
  --btn-focus-ring-color:  var(--color-brand-accent);
  --btn-focus-ring-width:  var(--space-focus-ring-width);
  --btn-focus-ring-offset: var(--space-focus-ring-offset);

  /* --- Nav --- */

  --nav-bg:                 var(--color-transparent);
  --nav-scrolled-bg:        var(--color-bg-surface);   /* applied at 0.7 opacity via JS */
  --nav-link-text:          var(--color-brand-primary);
  --nav-link-text-hover:    var(--color-brand-accent);
  --nav-hamburger-bg:       var(--color-brand-primary);
  --nav-hamburger-radius:   var(--radius-sm);
  --nav-hamburger-gap:      var(--space-3);
  --nav-hamburger-padding-v: var(--space-md);
  --nav-hamburger-padding-h: var(--space-sm);
  --nav-btn-container-gap:  var(--space-3xl);          /* 64px raw → --space-3xl build flag */

  /* --- Label (eyebrow) --- */
  /* Semantic tokens applied directly per extract — no component token layer */
  --label-bg:       var(--color-brand-subtle);
  --label-text:     var(--color-brand-primary);
  --label-radius:   var(--radius-sm);
  --label-gap:      var(--space-sm);
  --label-padding-v: var(--space-xs);
  --label-padding-h: var(--space-sm);

  /* --- What We Do (wwd) --- */

  --wtd-card-bg:           var(--color-bg-warm);       /* Beige variant (default) */
  --wtd-card-bg-alt:       var(--color-bg-default);    /* Green variant — D-NEW-2 */
  --wtd-card-radius:       var(--radius-xl);
  --wtd-card-border:       var(--color-text-muted);
  --wtd-card-border-width: 1px;                       /* named exception — no 1px primitive; --space-border-width stays 2px for buttons */
  --wtd-card-padding-v:    var(--space-2xl);
  --wtd-card-padding-h:    var(--space-md);
  --wtd-card-gap:          var(--space-md);             /* D-NEW-1: Figma = --space-md, not --space-lg */
  --wtd-card-heading-size: var(--type-2xl-size);
  --wtd-card-heading-font: var(--type-2xl-font);
  --wtd-card-heading-weight: var(--type-2xl-weight);
  --wtd-card-heading-lh:   var(--type-2xl-lh);
  --wtd-card-heading-ls:   var(--type-2xl-ls);
  --wtd-card-heading-color: var(--color-brand-primary);
  --wtd-card-body-size:    var(--type-base-size);
  --wtd-card-body-color:   var(--color-brand-primary);

  /* --- Contact CTA --- */

  --cta-bg:            var(--color-bg-inverse);
  --cta-heading-color: var(--color-text-heading-inverse);
  --cta-heading-size:  var(--type-3xl-size);
  --cta-body-color:    var(--color-text-inverse);
  --cta-body-size:     var(--type-lg-size);

  /* --- Assets --- */

  --asset-logo:                   url('assets/vaxa_logo-dark.svg');
  --asset-logo-inverse:           url('assets/vaxa_logo-light.svg');
  --asset-gdot:                   url('assets/vaxa_gDot-dark.svg');
  --asset-gdot-inverse:           url('assets/vaxa_gDot-light.svg');
  --asset-icon-bg-dot:            url('assets/icon-bg-dot.svg');
  --asset-icon-digital-marketing: url('assets/icon-digital-marketing.svg');
  --asset-icon-product-design:    url('assets/icon-product-design.svg');
  --asset-icon-creative-systems:  url('assets/icon-creative-systems.svg');
  --asset-icon-content-ops:       url('assets/icon-content-ops.svg');

}