/* tokens.css
   Consolidated canonical tokens (colors, spacing, typography)
*/

/* Canonical base tokens */
:root {

  /* Corner radius */
  --borders__radius__none:0px;
  --borders__radius__S:4px;
  --borders__radius__M:8px;
  --borders__radius__L:12px;

  /* Borders */
  --borders__stroke__none:0px;
  --borders__stroke__S:1px;
  --borders__stroke__M:2px;
  --borders__stroke__L:4px;
  --borders__stroke__XL:8px;

  /* Colors (from Publix Tech Deliverables/01 Base Variables/colors.css) */
  --color__primary__color1: #004a2e;
  --color__primary__color2: #2d810e;
  --color__primary__color3: #bbd600;
  --color__secondary__color300: #52a000;
  --color__secondary__color500: #00753e;
  --color__functional__grey900: #4a5955;
  --color__functional__grey500: #c2cac8;
  --color__functional__grey300: #f1f3f2;
  --color__functional__grey100: #f9fafa;
  --color__functional__white: #ffffff;
  --color__feedback__errorred700: #ca1d3c;
  --color__feedback__errorred300: #ff93a6;
  --color__feedback__focusblue700: #1377d3;
  --color__feedback__focusblue300: #72b1ec;

  /* Spacing scale (base) */
  --spacing__0: 0px;
  --spacing__1: 1px;
  --spacing__2: 2px;
  --spacing__4: 4px;
  --spacing__8: 8px;
  --spacing__12: 12px;
  --spacing__16: 16px;
  --spacing__20: 20px;
  --spacing__24: 24px;
  --spacing__32: 32px;
  --spacing__40: 40px;
  --spacing__56: 56px;
  --spacing__72: 72px;
  --spacing__80: 80px;

  /* Layout tokens (defaults - desktop-level values overridden in media queries) */
  --inset__XXL: 80px;
  --inset__XL: 40px;
  --inset__L: 32px;
  --inset__M: 24px;
  --inset__S: 16px;
  --inset__XS: 8px;
  --inset__XXS: 4px;
  --inset__XXXS: 2px;
  --inset__none: 0px;

  --stack__XXL: 40px;
  --stack__XL: 32px;
  --stack__L: 24px;
  --stack__M: 16px;
  --stack__ms: 12px;
  --stack__S: 8px;
  --stack__XS: 4px;

  --inline__XXL: 40px;
  --inline__XL: 32px;
  --inline__L: 24px;
  --inline__M: 16px;
  --inline__S: 8px;
  --inline__XS: 4px;

  --page__L: 80px;
  --page__M: 56px;
  --page__S: 40px;
  --page__XS: 24px;

  /* Typography families & weights */
  --font__family__headline: 'Montserrat', 'Avenir', 'Helvetica', 'Arial', sans-serif;
  --font__family__body: 'Montserrat', 'Avenir', 'Helvetica', 'Arial', sans-serif;
  --font__weight__Regular: 400;
  --font__weight__Heavy: 600;

  /* Typography sizes (base values) */
  --font__size__76: 76px;
  --font__size__56: 56px;
  --font__size__48: 48px;
  --font__size__40: 40px;
  --font__size__38: 38px;
  --font__size__32: 32px;
  --font__size__30: 30px;
  --font__size__28: 28px;
  --font__size__24: 24px;
  --font__size__20: 20px;
  --font__size__18: 18px;
  --font__size__16: 16px;
  --font__size__14: 14px;
  --font__size__12: 12px;
  --font__size__11: 11px;

  /* Line-heights */
  --font__lineheight__88: 88px;
  --font__lineheight__78: 78px;
  --font__lineheight__68: 68px;
  --font__lineheight__60: 60px;
  --font__lineheight__58: 58px;
  --font__lineheight__56: 56px;
  --font__lineheight__52: 52px;
  --font__lineheight__50: 50px;
  --font__lineheight__48: 48px;
  --font__lineheight__44: 44px;
  --font__lineheight__42: 42px;
  --font__lineheight__40: 40px;
  --font__lineheight__38: 38px;
  --font__lineheight__36: 36px;
  --font__lineheight__34: 34px;
  --font__lineheight__32: 32px;
  --font__lineheight__30: 30px;
  --font__lineheight__28: 28px;
  --font__lineheight__26: 26px;
  --font__lineheight__24: 24px;
  --font__lineheight__22: 22px;
  --font__lineheight__20: 20px;
  --font__lineheight__18: 18px;
  --font__lineheight__16: 16px;
  --font__lineheight__14: 14px;
  --font__lineheight__12: 12px;
  --font__lineheight__11: 11px;

  /* Letter-spacing */
  --font__letterspacing__L: -3px;
  --font__letterspacing__M: -0.75px;
  --font__letterspacing__S: -0.26px;
  --font__letterspacing__XS: 0px;
  --font__letterspacing__XXS: 0.3px;
}

/* Responsive typography scale mapping (mobile / tablet / desktop overrides) */

/* Mobile: 320px–575px */
@media (max-width:575px) {
  :root {
    /* font sizes mapped to smaller values */
    --font__size__XXL: var(--font__size__48);
    --font__size__XL: var(--font__size__38);
    --font__size__L: var(--font__size__32);
    --font__size__M: var(--font__size__28);
    --font__size__MS: var(--font__size__20);
    --font__size__S: var(--font__size__16);
    --font__size__XS: var(--font__size__14);
    --font__size__XXS: var(--font__size__16);
    --font__size__XXXS: var(--font__size__12);

    /* tight line-height */
   
    --font__lineheight__tight__XXL: var(--font__lineheight__50); 
    --font__lineheight__tight__XL: var(--font__lineheight__40); 
    --font__lineheight__tight__L: var(--font__lineheight__34); 
    --font__lineheight__tight__M: var(--font__lineheight__30); 
    --font__lineheight__tight__MS: var(--font__lineheight__22); 
    --font__lineheight__tight__S: var(--font__lineheight__18); 
    --font__lineheight__tight__XS: var(--font__lineheight__16); 
    --font__lineheight__tight__XXS: var(--font__lineheight__16); 
    --font__lineheight__tight__XXXS: var(--font__lineheight__14); 
    /* loose line-height */
    --font__lineheight__loose__XXL: var(--font__lineheight__60);
    --font__lineheight__loose__XL: var(--font__lineheight__50);
    --font__lineheight__loose__L: var(--font__lineheight__44);
    --font__lineheight__loose__M: var(--font__lineheight__40);
    --font__lineheight__loose__MS: var(--font__lineheight__32);
    --font__lineheight__loose__S: var(--font__lineheight__30);
    --font__lineheight__loose__XS: var(--font__lineheight__26);
    --font__lineheight__loose__XXS: var(--font__lineheight__24);
    --font__lineheight__loose__XXXS: var(--font__lineheight__16);

    /* inset / stack / inline - mobile */
    --inset__XXL: 24px;
    --inset__XL: 24px;
    --inset__L: 24px;
    --inset__M: 24px;
    --inset__S: 16px;
    --inset__XS: 8px;
    --inset__XXS: 4px;
    --inset__XXXS: 2px;

    --stack__XXL: 32px;
    --stack__XL: 16px;
    --stack__L: 16px;
    --stack__M: 16px;
    --stack__ms: 12px;
    --stack__S: 8px;
    --stack__XS: 4px;

    --inline__XXL: 16px;
    --inline__XL: 16px;
    --inline__L: 16px;
    --inline__M: 16px;
    --inline__S: 8px;
    --inline__XS: 4px;

    --page__L: 40px;
    --page__M: 32px;
    --page__S: 24px;
    --page__XS: 16px;
  }
}

/* Tablet: 576px–991px */
@media (min-width:576px) and (max-width:991px) {
  :root {
    --font__size__XXL: var(--font__size__56);
    --font__size__XL: var(--font__size__40);
    --font__size__L: var(--font__size__38);
    --font__size__M: var(--font__size__32);
    --font__size__MS: var(--font__size__24);
    --font__size__S: var(--font__size__18);
    --font__size__XS: var(--font__size__16);
    --font__size__XXS: var(--font__size__16);
    --font__size__XXXS: var(--font__size__12);

    /* tight line-height */
    --font__lineheight__tight__XXL: var(--font__lineheight__58); 
    --font__lineheight__tight__XL: var(--font__lineheight__42); 
    --font__lineheight__tight__L: var(--font__lineheight__40); 
    --font__lineheight__tight__M: var(--font__lineheight__34); 
    --font__lineheight__tight__MS: var(--font__lineheight__26); 
    --font__lineheight__tight__S: var(--font__lineheight__20); 
    --font__lineheight__tight__XS: var(--font__lineheight__18); 
    --font__lineheight__tight__XXS: var(--font__lineheight__16); 
    --font__lineheight__tight__XXXS: var(--font__lineheight__14); 
    /* loose line-height */
    --font__lineheight__loose__XXL: var(--font__lineheight__68);
    --font__lineheight__loose__XL: var(--font__lineheight__52); 
    --font__lineheight__loose__L: var(--font__lineheight__50); 
    --font__lineheight__loose__M: var(--font__lineheight__44);
    --font__lineheight__loose__MS: var(--font__lineheight__36);
    --font__lineheight__loose__S: var(--font__lineheight__32);
    --font__lineheight__loose__XS: var(--font__lineheight__28);
    --font__lineheight__loose__XXS: var(--font__lineheight__24);
    --font__lineheight__loose__XXXS: var(--font__lineheight__16);

    /* inset / stack / inline - tablet */
    --inset__XXL: 40px;
    --inset__XL: 40px;
    --inset__L: 32px;
    --inset__M: 24px;
    --inset__S: 16px;
    --inset__XS: 8px;
    --inset__XXS: 4px;
    --inset__XXXS: 2px;

    --stack__XXL: 40px;
    --stack__XL: 32px;
    --stack__L: 24px;
    --stack__M: 16px;
    --stack__ms: 12px;
    --stack__S: 8px;
    --stack__XS: 4px;

    --inline__XXL: 40px;
    --inline__XL: 32px;
    --inline__L: 24px;
    --inline__M: 16px;
    --inline__S: 8px;
    --inline__XS: 4px;

    --page__L: 40px;
    --page__M: 40px;
    --page__S: 32px;
    --page__XS: 24px;
  }
}

/* Desktop: width >= 992px (defaults already set in :root) */
@media (min-width:992px) {
  :root {
    --font__size__XXL: var(--font__size__76);
    --font__size__XL: var(--font__size__56);
    --font__size__L: var(--font__size__48);
    --font__size__M: var(--font__size__40);
    --font__size__MS: var(--font__size__32);
    --font__size__S: var(--font__size__24);
    --font__size__XS: var(--font__size__18);
    --font__size__XXS: var(--font__size__14);
    --font__size__XXXS: var(--font__size__12);

    /* tight line-height */
    --font__lineheight__tight__XXL: var(--font__lineheight__78); 
    --font__lineheight__tight__XL: var(--font__lineheight__58); 
    --font__lineheight__tight__L: var(--font__lineheight__50); 
    --font__lineheight__tight__M: var(--font__lineheight__42); 
    --font__lineheight__tight__MS: var(--font__lineheight__34); 
    --font__lineheight__tight__S: var(--font__lineheight__26); 
    --font__lineheight__tight__XS: var(--font__lineheight__20); 
    --font__lineheight__tight__XXS: var(--font__lineheight__16);
    --font__lineheight__tight__XXXS: var(--font__lineheight__14); 
    /* loose line-height */
    --font__lineheight__loose__XXL: var(--font__lineheight__88);
    --font__lineheight__loose__XL: var(--font__lineheight__68);
    --font__lineheight__loose__L: var(--font__lineheight__60);
    --font__lineheight__loose__M: var(--font__lineheight__52);
    --font__lineheight__loose__MS: var(--font__lineheight__44);
    --font__lineheight__loose__S: var(--font__lineheight__36);
    --font__lineheight__loose__XS: var(--font__lineheight__28);
    --font__lineheight__loose__XXS: var(--font__lineheight__24);
    --font__lineheight__loose__XXXS: var(--font__lineheight__16);

    /* Desktop inset/stack/inline/page values are the same as the default :root values above */
  }
}