/*
 * tokens.css — Amanda Morgan Design System v1.2.3
 * Generated from design-system tokens. DO NOT hand-edit.
 * Source of truth: tokens.json → edit there, regenerate here via Claude Code.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ─── @font-face ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');


/* ─── Primitives ─────────────────────────────────────────────────────────── */
:root {

  /* Size scale — name matches value in px */
  --size-0:   0px;
  --size-2:   2px;
  --size-4:   4px;
  --size-8:   8px;
  --size-12:  12px;
  --size-16:  16px;
  --size-18:  18px;
  --size-20:  20px;
  --size-22:  22px;
  --size-24:  24px;
  --size-26:  26px;
  --size-28:  28px;
  --size-32:  32px;
  --size-36:  36px;
  --size-40:  40px;
  --size-48:  48px;
  --size-54:  54px;
  --size-56:  56px;
  --size-60:  60px;
  --size-64:  64px;
  --size-72:  72px;
  --size-80:  80px;
  --size-84:  84px;
  --size-96:  96px;
  --size-120: 120px;
  --size-128: 128px;
  --size-148: 148px;
  --size-154: 154px;
  --size-160: 160px;
  --size-192: 192px;
  --size-200: 200px;
  --size-206: 206px;
  --size-208: 208px;
  --size-216: 216px;
  --size-224: 224px;
  --size-235: 235px;
  --size-240: 240px;
  --size-250: 250px;
  --size-256: 256px;
  --size-258: 258px;
  --size-264: 264px;
  --size-272: 272px;
  --size-278: 278px;
  --size-284: 284px;
  --size-296: 296px;
  --size-300: 300px;
  --size-320: 320px;
  --size-360: 360px;
  --size-372: 372px;
  --size-464: 464px;
  --size-472: 472px;
  --size-480: 480px;
  --size-490: 490px;
  --size-500: 500px;
  --size-516: 516px;
  --size-532: 532px;
  --size-564: 564px;
  --size-600: 600px;
  --size-624: 624px;
  --size-640: 640px;
  --size-656: 656px;
  --size-664: 664px;
  --size-684: 684px;
  --size-700: 700px;
  --size-764: 764px;
  --size-800: 800px;
  --size-900: 900px;
  --size-964: 964px;
  --size-1024: 1024px;
  --size-1100: 1100px;
  --size-1440: 1440px;
  --size-1600: 1600px;
  --size-1700: 1700px;
  --size-2000: 2000px;
  --size-2400: 2400px;

  /* Font-weight scale */
  --weight-100: 100;
  --weight-200: 200;
  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;
  --weight-800: 800;
  --weight-900: 900;

  /* Line-height scale */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter-spacing scale */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;

  /* Font families */
  --font-display:  'King Basil Lite', serif;
  --font-standard: 'Outfit', system-ui, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;

  /* Color: Blue — steps 10–80 light-friendly, 90–160 dark-friendly */
  --color-blue-10:  #EBF3FF;
  --color-blue-20:  #DCE4F2;
  --color-blue-30:  #CCD6E6;
  --color-blue-40:  #BDC7D9;
  --color-blue-50:  #ADB8CC;
  --color-blue-60:  #9EA9BF;
  --color-blue-70:  #8E9BB3;
  --color-blue-80:  #7F8CA6;
  --color-blue-90:  #6F7D99;
  --color-blue-100: #606E8C;
  --color-blue-110: #506080;
  --color-blue-120: #415173;
  --color-blue-130: #314266;
  --color-blue-140: #223359;
  --color-blue-150: #12254D;
  --color-blue-160: #031640;

  /* Color: Red */
  --color-red-10:  #FFF0EE;
  --color-red-20:  #F2E1DE;
  --color-red-30:  #E6D1CF;
  --color-red-40:  #D9C2BF;
  --color-red-50:  #CDB2B0;
  --color-red-60:  #C0A3A0;
  --color-red-70:  #B39390;
  --color-red-80:  #A78481;
  --color-red-90:  #9A7471;
  --color-red-100: #8E6562;
  --color-red-110: #815552;
  --color-red-120: #744642;
  --color-red-130: #683633;
  --color-red-140: #5B2723;
  --color-red-150: #4F1714;
  --color-red-160: #420804;

  /* Color: Green */
  --color-green-10:  #EDFBF3;
  --color-green-20:  #DDECE4;
  --color-green-30:  #CEDED4;
  --color-green-40:  #BECFC5;
  --color-green-50:  #AEC1B6;
  --color-green-60:  #9EB2A7;
  --color-green-70:  #8FA397;
  --color-green-80:  #7F9588;
  --color-green-90:  #6F8679;
  --color-green-100: #5F786A;
  --color-green-110: #50695A;
  --color-green-120: #405A4B;
  --color-green-130: #304C3C;
  --color-green-140: #203D2D;
  --color-green-150: #112F1D;
  --color-green-160: #01200E;

  /* Color: Orange */
  --color-orange-10:  #FFF5EB;
  --color-orange-20:  #F2E6DB;
  --color-orange-30:  #E5D8CC;
  --color-orange-40:  #D8C9BC;
  --color-orange-50:  #CABAAC;
  --color-orange-60:  #BDAB9D;
  --color-orange-70:  #B09D8D;
  --color-orange-80:  #A38E7D;
  --color-orange-90:  #967F6E;
  --color-orange-100: #89705E;
  --color-orange-110: #7C624E;
  --color-orange-120: #6F533F;
  --color-orange-130: #61442F;
  --color-orange-140: #54351F;
  --color-orange-150: #472710;
  --color-orange-160: #3A1800;

  /* Color: Purple */
  --color-purple-10:  #F4F0FF;
  --color-purple-20:  #E5E1F3;
  --color-purple-30:  #D7D2E7;
  --color-purple-40:  #C8C3DB;
  --color-purple-50:  #B9B3CF;
  --color-purple-60:  #ABA4C3;
  --color-purple-70:  #9C95B7;
  --color-purple-80:  #8D86AB;
  --color-purple-90:  #7F779E;
  --color-purple-100: #706892;
  --color-purple-110: #615986;
  --color-purple-120: #534A7A;
  --color-purple-130: #443A6E;
  --color-purple-140: #352B62;
  --color-purple-150: #271C56;
  --color-purple-160: #180D4A;

  /* Color: Yellow */
  --color-yellow-10:  #FFFCE8;
  --color-yellow-20:  #F2EED9;
  --color-yellow-30:  #E5E0C9;
  --color-yellow-40:  #D8D2BA;
  --color-yellow-50:  #CBC5AA;
  --color-yellow-60:  #BEB79B;
  --color-yellow-70:  #B1A98B;
  --color-yellow-80:  #A49B7C;
  --color-yellow-90:  #988D6C;
  --color-yellow-100: #8B7F5D;
  --color-yellow-110: #7E714D;
  --color-yellow-120: #71633E;
  --color-yellow-130: #64562E;
  --color-yellow-140: #57481F;
  --color-yellow-150: #4A3A0F;
  --color-yellow-160: #3D2C00;

  /* Color: Pink */
  --color-pink-10:  #FFF0F8;
  --color-pink-20:  #F2E0EA;
  --color-pink-30:  #E6D0DB;
  --color-pink-40:  #D9C1CD;
  --color-pink-50:  #CCB1BE;
  --color-pink-60:  #BFA1B0;
  --color-pink-70:  #B391A1;
  --color-pink-80:  #A68193;
  --color-pink-90:  #997284;
  --color-pink-100: #8C6276;
  --color-pink-110: #805267;
  --color-pink-120: #734259;
  --color-pink-130: #66324A;
  --color-pink-140: #59233C;
  --color-pink-150: #4D132D;
  --color-pink-160: #40031F;

  /* Color: Teal */
  --color-teal-10:  #EDFCFA;
  --color-teal-20:  #DDEEEB;
  --color-teal-30:  #CEDFDD;
  --color-teal-40:  #BED1CE;
  --color-teal-50:  #AEC2C0;
  --color-teal-60:  #9EB4B1;
  --color-teal-70:  #8FA5A3;
  --color-teal-80:  #7F9794;
  --color-teal-90:  #6F8886;
  --color-teal-100: #5F7A77;
  --color-teal-110: #506B69;
  --color-teal-120: #405D5A;
  --color-teal-130: #304E4C;
  --color-teal-140: #20403D;
  --color-teal-150: #11312F;
  --color-teal-160: #012320;

  /* Color: Neutral */
  --color-neutral-0:    #000000;
  --color-neutral-50:   #0F0F0E;
  --color-neutral-100:  #1A1917;
  --color-neutral-150:  #252420;
  --color-neutral-200:  #2F2E2B;
  --color-neutral-300:  #444441;
  --color-neutral-400:  #6B6960;
  --color-neutral-500:  #8A8880;
  --color-neutral-600:  #B4B2A9;
  --color-neutral-650:  #C2BFB6;
  --color-neutral-700:  #D0CDC5;
  --color-neutral-750:  #DEDAD3;
  --color-neutral-800:  #ECEAE5;
  --color-neutral-850:  #F2F0EB;
  --color-neutral-900:  #F5F3EE;
  --color-neutral-1000: #FFFFFF;


  /* ─── Semantics: Light Mode ─────────────────────────────────────────────── */

  /* Surfaces */
  --color-surface-page:      #fffff2;
  --color-surface-primary:   #f9f9f2;
  --color-surface-secondary: #f3f3e8;
  --color-surface-tertiary:  #dde8e5;
  --color-surface-inverse:   #00001a;

  /* Text */
  --color-text-primary:   #0f0b12;
  --color-text-secondary: #252525;
  --color-text-tertiary:  #2a2a2a;
  --color-text-inverse:   #f9f9f2;
  --color-text-on-accent: #fffff2;

  /* Borders */
  --color-border-subtle:  #f9f9f2;
  --color-border-default: #e9efec;
  --color-border-strong:  #d3dfda;
  /* Ghost border — subtle low-contrast divider that works on any surface, since it's
     a % of text-primary rather than a fixed hex (self-adapts light/dark automatically,
     no separate dark-mode line needed). Formalizes a pattern that surrealism.css
     (--ink-ghost) and case-study.css (--cs-border) had each independently invented —
     added here during the 2026-09-11 components.css consolidation so both page files
     (and components.css itself) can reference one real token instead of a page-local
     alias components.css can't see. */
  --color-border-ghost: color-mix(in srgb, var(--color-text-primary) 10%, transparent);

  /* Action */
  --color-action-primary:          #316da1;
  --color-action-primary-hover:    #1e4881;
  --color-action-primary-text:     #f9f9f2;
  --color-action-secondary:        transparent;
  --color-action-secondary-border: #316da1;
  --color-action-secondary-hover:  #1e4881;
  --color-action-secondary-text:   #316da1;

  /* Status */
  --color-info-subtle:     var(--color-blue-10);
  --color-info-default:    #2E72D2;
  --color-info-strong:     #0F3D85;
  --color-info-text:       #082960;

  --color-success-subtle:  var(--color-green-10);
  --color-success-default: #22A85E;
  --color-success-strong:  #085F2E;
  --color-success-text:    #043D1D;

  --color-warning-subtle:  var(--color-yellow-10);
  --color-warning-default: #F0BC00;
  --color-warning-strong:  #966D00;
  --color-warning-text:    #664A00;

  --color-danger-subtle:   var(--color-red-10);
  --color-danger-default:  #276c65;
  --color-danger-strong:   #9A1E11;
  --color-danger-text:     #6E1009;

  /* Accent — Figma: Color/Accent/Default (teal) */
  --color-accent:           #016f6b;
  --color-accent-subtle:    #96f0df;
  --color-accent-text:      #b28b26;
  --color-accent-secondary: #7be2cd; /* was #b3fff1, stale — confirmed against live Figma (Color/Accent/Secondary→color/teal-copy/2) while matching the exported Shape SVG's teal fill exactly */
  --color-accent-tertiary:  #9ed1ff;

  /* Tag text — aliases Color/Status/Danger/Default (VariableID:17:21) */
  --color-tag-text: var(--color-danger-default);


  /* ─── Spacing ────────────────────────────────────────────────────────────── */
  --space-component-xs: var(--size-4);
  --space-component-sm: var(--size-8);
  --space-component-md: var(--size-12);
  --space-component-lg: var(--size-16);
  --space-component-xl: var(--size-24);

  --space-stack-xs: var(--size-4);
  --space-stack-sm: var(--size-8);
  --space-stack-md: var(--size-16);
  --space-stack-lg: var(--size-24);
  --space-stack-xl: var(--size-32);


  /* ─── Radius & Border ────────────────────────────────────────────────────── */
  --radius-none:   0px;
  --radius-sm:     var(--size-2);
  --radius-md:     var(--size-4);
  --radius-lg:     var(--size-8);
  --radius-xl:     var(--size-12);
  --radius-pill:   9999px;
  --radius-circle: 50%;

  --border-width-thin:    0.5px;
  --border-width-default: 1px;
  --border-width-strong:  2px;


  /* ─── Elevation ──────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(26,25,23,0.06);
  --shadow-md:    0 4px 12px rgba(26,25,23,0.08);
  --shadow-lg:    0 12px 32px rgba(26,25,23,0.10);
  --shadow-xl:    0 24px 64px rgba(26,25,23,0.14);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);


  /* ─── Component tokens ───────────────────────────────────────────────────── */
  --button-height-sm:    var(--size-24);
  --button-height-md:    var(--size-40);
  --button-height-lg:    var(--size-48);
  --button-padding-x-sm: var(--size-12);
  --button-padding-x-md: var(--size-16);
  --button-padding-x-lg: var(--size-24);
  --button-font-family:  var(--font-standard);
  --button-font-weight:  var(--weight-600);
  --button-radius:       var(--radius-sm);

  --input-height-md:   var(--size-40);
  --input-height-lg:   var(--size-48);
  --input-padding-x:   var(--size-16);
  --input-font-family: var(--font-standard);
  --input-radius:      var(--radius-md);

  --card-padding-sm: var(--size-16);
  --card-padding-md: var(--size-24);
  --card-padding-lg: var(--size-32);
  --card-radius:     var(--radius-lg);
  --card-border:     var(--border-width-thin) solid var(--color-border-subtle);

  --nav-height-sm: var(--size-48);
  --nav-height-lg: var(--size-56);


  /* ─── Responsive: sm (mobile default, < 1024px) ─────────────────────────── */
  /* Values sourced from Figma Responsive variable collection.                */
  --container:          100%;
  --gutter:             var(--size-16);   /* Layout/Gutter sm = 16 */
  --space-section:      var(--size-16);   /* Space/Section sm = 16 */
  --padding-section:    var(--size-16);   /* Padding/Section sm = 16 */
  --padding-button-horizontal: var(--size-12); /* Padding/Button Horizontal Padding sm = 12 */
  --space-section-large: var(--size-48); /* Padding/Section Large sm = 48 */
  --space-list-gap:     var(--size-32);  /* Padding/List Gap sm = 32 */
  --padding-container-vertical-2: var(--size-8); /* Padding/Container Vertical Padding 2 sm = 8 */
  --padding-container-horizontal-2: var(--size-4); /* Padding/Container Horizontal Padding 2 sm = 4 */
  --layout-evidence-col-min: var(--size-216); /* Layout/Evidence Col Min sm = 216 */
  --layout-evidence-col-max: var(--size-500); /* Layout/Evidence Col Max — constant 500 across all breakpoints */
  --layout-ata-glance-min: var(--size-224); /* Layout/Ata Glance Min sm = 224 */
  --layout-ata-glance-gap: var(--size-36);  /* Layout/Ata Glance Gap sm = 36 */

  /* IMG sizes — Figma Responsive > IMG Size */
  --img-hero-height:               var(--size-464);  /* IMG Size/Hero Height sm = 464 */
  --img-hero-width:                var(--size-600);   /* IMG Size/Hero Width sm = 600 */
  --img-key-considerations-height: var(--size-120);  /* IMG Size/Key Considerations Height sm = 120 */
  --img-key-considerations-width:  var(--size-120);  /* IMG Size/Key Considerations Width sm = 120 */
  --img-bento-col-min:             var(--size-200);  /* IMG Size/Bento Col Min-Wid sm = 200 */
  --img-bento-col-max:             var(--size-272);  /* IMG Size/Bento Col Max-Wid sm = 272 */
  --img-bento-col2-min:            var(--size-200);  /* IMG Size/Bento Col 2 Min-Width sm = 200 */
  --img-bento-col2-max:            var(--size-272);  /* IMG Size/Bento Col 2 Max-Width sm = 272 */
  --img-bento-wide-img-min-width:  var(--size-200);  /* IMG Size/Bento Wide IMG Min-Wid sm = 200 */
  --img-bento-wide-img-max-width:  var(--size-272);  /* IMG Size/Bento Wide IMG Max-Wid sm = 272 (was 296) */
  --img-bento-wide-img-max-height: var(--size-200);  /* IMG Size/Bento Wide IMG Max-Height sm = 200 */
  --img-bento-col5-item-max-height: var(--size-278); /* Figma: BaseModule=FinalFinal instances in FinalFinalMod>Default Col 5 — literal max-height override, not bound to a Figma variable */
  --img-bento-col5-max:             var(--size-600); /* IMG Size/Bento col5 Max-Wid sm = 600 */
  --img-bento-col5-min:             var(--size-200); /* IMG Size/Bento Col 5 Min-Wid sm = 200 (renamed from Bento Col 1 Min-Wid 2026-09-30, was mislabeled — always bound to Col 5, never Col 1) */
  --img-bento-masonry-max-width:   var(--size-1700); /* Figma: FinalFinalMod>Default — literal max-width override, not bound to a Figma variable */
  --img-bento-card-min-height:     var(--size-272);  /* IMG Size/Bento Card Min Height — constant 272 across all breakpoints */
  --img-bento-col-max-height:      var(--size-564);  /* IMG Size/Bento Col Max-Height — constant 564 across all breakpoints */

  --text-display-size:      var(--size-40);   /* Display sm = 40 */
  --text-h1-display-size:   var(--size-40);   /* H1 Display sm = 40 */
  --text-h1-size:           var(--size-40);   /* H1 sm = 40 */
  --text-h2-size:           var(--size-32);   /* H2 sm = 32 */
  --text-h3-size:           var(--size-24);   /* H3 sm = 24 */
  --text-h4-size:           var(--size-20);   /* H4 sm = 20 */
  --text-h5-size:           var(--size-20);   /* H5 sm = 20 */
  --text-body-lg-size:      var(--size-16);   /* Body LG sm = 16 */
  --text-body-default-size:         var(--size-16);   /* Body Default sm = 16 */
  --text-body-small-size:   var(--size-12);   /* Body Small sm = 12 */
  --text-overline-size:     var(--size-16);   /* Overline sm = 16 */
  --text-label-size:        12px;             /* Label sm = 12 */
  --text-subheading-size:   var(--size-18);   /* Subheading sm = 18 */

  /* Typography role tokens */
  --text-display-family:  var(--font-display);
  --text-display-weight:  var(--weight-600);
  --text-display-leading: var(--leading-tight);

  --text-h1-family:  var(--font-standard);
  --text-h1-weight:  var(--weight-600);
  --text-h1-leading: var(--leading-tight);

  --text-h2-family:  var(--font-standard);
  --text-h2-weight:  var(--weight-600);
  --text-h2-leading: var(--leading-snug);

  --text-h3-family:  var(--font-standard);
  --text-h3-weight:  var(--weight-500);
  --text-h3-leading: var(--leading-snug);

  --text-h4-family:  var(--font-standard);
  --text-h4-weight:  var(--weight-500);
  --text-h4-leading: var(--leading-snug);

  --text-h5-family:  var(--font-standard);
  --text-h5-weight:  var(--weight-500);
  --text-h5-leading: var(--leading-snug);

  --text-subheading-family:  var(--font-standard);
  --text-subheading-weight:  var(--weight-400);
  --text-subheading-leading: var(--leading-snug);

  --text-body-lg-family:  var(--font-standard);
  --text-body-lg-weight:  var(--weight-300);   /* 300 constant across all breakpoints */
  --text-body-lg-leading: var(--leading-normal);

  --text-body-default-family:  var(--font-standard);
  --text-body-default-weight:  var(--weight-300);
  --text-body-default-leading: var(--leading-normal);

  --text-body-small-family:  var(--font-standard);
  --text-body-small-weight:  var(--weight-200);
  --text-body-small-leading: var(--leading-normal);

  --text-h1-display-family:  var(--font-standard);
  --text-h1-display-weight:  var(--weight-600);
  --text-h1-display-leading: var(--leading-tight);

  --text-overline-family:  var(--font-standard);
  --text-overline-weight:  var(--weight-200);  /* sm = 200 (constant across all breakpoints) */
  --text-overline-leading: var(--leading-normal);

  --text-label-family:   var(--font-standard);
  --text-label-weight:   var(--weight-600);
  --text-label-leading:  var(--leading-normal);
  --text-label-tracking: var(--tracking-wider);
}


/* ─── Dark mode overrides ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-page:      #00001a;
    --color-surface-primary:   #01031d;
    --color-surface-secondary: #000019;
    --color-surface-tertiary:  #000021;
    --color-surface-inverse:   #fffff2;

    --color-text-primary:   #f9f9f2;
    --color-text-secondary: #e9efec;
    --color-text-tertiary:  #d3dfda;
    --color-text-inverse:   #0f0b12;
    --color-text-on-accent: #000010;

    --color-border-subtle:  #0f0b12;
    --color-border-default: #252525;
    --color-border-strong:  #2a2a2a;

    --color-action-primary:          #4ea2c6;
    --color-action-primary-hover:    #3e86b3;
    --color-action-primary-text:     #00001a;
    --color-action-secondary-border: #4ea2c6;
    --color-action-secondary-hover:  #3e86b3;
    --color-action-secondary-text:   #4ea2c6;

    --color-info-subtle:     var(--color-blue-160);
    --color-info-default:    #5E97E5;
    --color-info-strong:     #94BBF0;
    --color-info-text:       #C2D9F8;

    --color-success-subtle:  var(--color-green-160);
    --color-success-default: #52C885;
    --color-success-strong:  #8FE0B0;
    --color-success-text:    #C4F0D5;

    --color-warning-subtle:  var(--color-yellow-160);
    --color-warning-default: #FFD52E;
    --color-warning-strong:  #FFE870;
    --color-warning-text:    #FFF4B5;

    --color-danger-subtle:   var(--color-red-160);
    --color-danger-default:  #276c65;
    --color-danger-strong:   #FCA99F;
    --color-danger-text:     #FECDC7;

    --color-tag-text: #52b3a8;

    --color-accent:           #39b69f;
    --color-accent-subtle:    #003941;
    --color-accent-text:      #baa130;
    --color-accent-secondary: #002e36;
    --color-accent-tertiary:  #053a86;

    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
  }
}


/* ─── Responsive scaling ─────────────────────────────────────────────────── */
/* md: ≥ 600px — Figma md breakpoint (Layout/Screen min-width). Was incorrectly
   1024px — every property value in this block was already correct for "md" (per
   Figma's Responsive collection), just paired with the wrong threshold: 1024px is
   actually where "lg" starts, not "md" (same off-by-one-tier fix applied to the
   lg/xl/2xl blocks below — check their thresholds too if this class of bug recurs). */
@media (min-width: 600px) {
  :root {
    --container:              960px;
    --gutter:                 var(--size-24);   /* Layout/Gutter md = 24 */
    --space-section:          var(--size-24);   /* Space/Section md = 24 */
    --padding-section:        var(--size-24);   /* Padding/Section md = 24 */
    --padding-button-horizontal: var(--size-16); /* Padding/Button Horizontal Padding md = 16 */
    --space-section-large:    var(--size-48);   /* Padding/Section Large md = 48 */
    --space-list-gap:         var(--size-32);   /* Padding/List Gap md = 32 */
    --padding-container-vertical-2: var(--size-12); /* Padding/Container Vertical Padding 2 md = 12 */
    --padding-container-horizontal-2: var(--size-8); /* Padding/Container Horizontal Padding 2 md = 8 */
    --layout-evidence-col-min: var(--size-264); /* Layout/Evidence Col Min md = 264 (constant through 2xl) */
    --layout-evidence-col-max: var(--size-600); /* Layout/Evidence Col Max md = 600 (spike — reverts to 500 at lg) */
    --layout-ata-glance-min: var(--size-154); /* Layout/Ata Glance Min md = 154 */
    --layout-ata-glance-gap: var(--size-24);  /* Layout/Ata Glance Gap md = 24 */
    --img-hero-width:                var(--size-1024);  /* IMG Size/Hero Width md = 1024 */
    --img-key-considerations-height: var(--size-640);   /* IMG Size/Key Considerations Height md = 640 */
    --img-key-considerations-width:  var(--size-640);   /* IMG Size/Key Considerations Width md = 640 */
    --img-bento-col-min:             var(--size-235);   /* IMG Size/Bento Col Min-Wid md = 235 */
    --img-bento-col-max:             var(--size-490);   /* IMG Size/Bento Col Max-Wid md = 490 (was 240; updated 2026-09-30) */
    --img-bento-col2-min:            var(--size-235);   /* IMG Size/Bento Col 2 Min-Width md = 235 */
    --img-bento-col2-max:            var(--size-490);   /* IMG Size/Bento Col 2 Max-Width md = 490 */
    --img-bento-wide-img-min-width:  var(--size-284);   /* IMG Size/Bento Wide IMG Min-Wid md = 284 (constant through 2xl) */
    --img-bento-wide-img-max-width:  var(--size-656);   /* IMG Size/Bento Wide IMG Max-Wid md = 656 (constant through 2xl) */
    --img-bento-wide-img-max-height: var(--size-208);   /* IMG Size/Bento Wide IMG Max-Height md = 208 (constant through 2xl) */
    --img-bento-col5-max:            var(--size-656);   /* IMG Size/Bento col5 Max-Wid md = 656 (constant through lg) */
    --img-bento-col5-min:            var(--size-235);   /* IMG Size/Bento Col 5 Min-Wid md = 235 */
    --text-display-size:      var(--size-56);
    --text-h1-display-size:   var(--size-54);   /* H1 Display md = 54 */
    --text-h1-size:           var(--size-40);   /* H1 md = 40 */
    --text-h2-size:           var(--size-40);   /* H2 md = 40 */
    --text-h3-size:           var(--size-32);   /* H3 md = 32 */
    --text-h4-size:           var(--size-24);   /* H4 md = 24 */
    --text-h5-size:           var(--size-24);   /* H5 md = 24 (constant through lg/xl/2xl) */
    --text-body-lg-size:      var(--size-16);   /* Body LG md = 16 */
    --text-body-default-size:         var(--size-16);   /* Body Default md = 16 */
    --text-body-small-size:   var(--size-14);   /* Body Small md = 14 */
    --text-overline-size:     var(--size-18);   /* Overline md = 18 */
    --text-label-size:        12px;
    --text-subheading-size:   var(--size-20);   /* Subheading md = 20 */
  }
}

/* lg: ≥ 1024px — Figma lg breakpoint (Layout/Screen min-width). Was incorrectly
   1440px — see the md block above for the full explanation. */
@media (min-width: 1024px) {
  :root {
    --container:              1280px;
    --gutter:                 var(--size-64);   /* Layout/Gutter lg = 64 */
    --space-section:          var(--size-54);   /* Space/Section lg = 54 */
    --padding-section:        var(--size-40);   /* Padding/Section lg = 40 */
    --padding-button-horizontal: var(--size-24); /* Padding/Button Horizontal Padding lg = 24 (constant through 2xl) */
    --space-section-large:    var(--size-72);   /* Padding/Section Large lg = 72 */
    --space-list-gap:         var(--size-54);   /* Padding/List Gap lg = 54 */
    --padding-container-vertical-2: var(--size-16); /* Padding/Container Vertical Padding 2 lg = 16 */
    --padding-container-horizontal-2: var(--size-12); /* Padding/Container Horizontal Padding 2 lg = 12 */
    --layout-evidence-col-max: var(--size-500); /* Layout/Evidence Col Max lg = 500 (reverts from md's 600 spike) */
    --layout-ata-glance-min: var(--size-206); /* Layout/Ata Glance Min lg = 206 (constant through 2xl) */
    --layout-ata-glance-gap: var(--size-16);  /* Layout/Ata Glance Gap lg = 16 (constant through 2xl) */
    --img-hero-height:               var(--size-564);   /* IMG Size/Hero Height lg = 564 */
    --img-hero-width:                var(--size-1440);  /* IMG Size/Hero Width lg = 1440 */
    --img-key-considerations-height: var(--size-1100);  /* IMG Size/Key Considerations Height lg = 1100 */
    --img-key-considerations-width:  var(--size-1100);  /* IMG Size/Key Considerations Width lg = 1100 */
    --img-bento-col-min:             var(--size-200);   /* IMG Size/Bento Col Min-Wid lg = 200 */
    --img-bento-col-max:             var(--size-250);   /* IMG Size/Bento Col Max-Wid lg = 250 (constant through 2xl) */
    --img-bento-col2-min:            var(--size-200);   /* IMG Size/Bento Col 2 Min-Width lg = 200 */
    --img-bento-col2-max:            var(--size-250);   /* IMG Size/Bento Col 2 Max-Width lg = 250 */
    --img-bento-col5-min:            var(--size-250);   /* IMG Size/Bento Col 5 Min-Wid lg = 250 (constant through 2xl) */
    --text-display-size:      var(--size-64);   /* Display lg = 64 */
    --text-h1-display-size:   var(--size-64);   /* H1 Display lg = 64 */
    --text-h1-size:           var(--size-40);   /* H1 lg = 40 */
    --text-h2-size:           var(--size-48);   /* H2 lg = 48 */
    --text-h3-size:           var(--size-40);   /* H3 lg = 40 */
    --text-h4-size:           var(--size-32);   /* H4 lg = 32 */
    --text-body-lg-size:      var(--size-18);   /* Body LG lg = 18 */
    --text-body-default-size:         var(--size-16);   /* Body Default lg = 16 */
    --text-body-small-size:   var(--size-14);   /* Body Small lg = 14 */
    --text-overline-size:     var(--size-22);   /* Overline lg = 22 */
    --text-label-size:        12px;
    --text-subheading-size:   var(--size-24);   /* Subheading lg = 24 */
  }
}

/* xl: ≥ 1441px — Figma xl breakpoint (Layout/Screen min-width). Was incorrectly
   1600px — see the md block above for the full explanation. */
@media (min-width: 1441px) {
  :root {
    --container:              1600px;
    --gutter:                 var(--size-64);   /* Layout/Gutter xl = 64 */
    --space-section:          var(--size-48);   /* Space/Section xl = 48 */
    --padding-section:        var(--size-48);   /* Padding/Section xl = 48 */
    --space-section-large:    var(--size-72);   /* Padding/Section Large xl = 72 */
    --space-list-gap:         var(--size-54);   /* Padding/List Gap xl = 54 */
    --padding-container-vertical-2: var(--size-24); /* Padding/Container Vertical Padding 2 xl = 24 */
    --padding-container-horizontal-2: var(--size-24); /* Padding/Container Horizontal Padding 2 xl = 24 (constant through 2xl) */
    --img-hero-height:               var(--size-624);   /* IMG Size/Hero Height xl = 624 */
    --img-hero-width:                var(--size-1600);  /* IMG Size/Hero Width xl = 1600 */
    --img-key-considerations-height: var(--size-1440);  /* IMG Size/Key Considerations Height xl = 1440 */
    --img-key-considerations-width:  var(--size-1440);  /* IMG Size/Key Considerations Width xl = 1440 */
    --img-bento-col-min:             var(--size-224);   /* IMG Size/Bento Col Min-Wid xl = 224 (was 300; constant through 2xl) */
    --img-bento-col-max:             var(--size-490);   /* IMG Size/Bento Col Max-Wid xl = 490 (was 250; constant through 2xl) */
    --img-bento-col2-min:            var(--size-200);   /* IMG Size/Bento Col 2 Min-Width xl = 200 (constant through 2xl) */
    --img-bento-col2-max:            var(--size-250);   /* IMG Size/Bento Col 2 Max-Width xl = 250 */
    --img-bento-col5-max:            var(--size-600);   /* IMG Size/Bento col5 Max-Wid xl = 600 (was 656; constant through 2xl) */
    --text-display-size:      var(--size-80);   /* Display xl = 80 */
    --text-h1-display-size:   var(--size-64);   /* H1 Display xl = 64 */
    --text-h1-size:           var(--size-64);   /* H1 xl = 64 */
    --text-h2-size:           var(--size-54);   /* H2 xl = 54 */
    --text-h3-size:           var(--size-48);   /* H3 xl = 48 */
    --text-h4-size:           var(--size-32);   /* H4 xl = 32 */
    --text-body-lg-size:      var(--size-20);   /* Body LG xl = 20 */
    --text-body-default-size:         var(--size-18);   /* Body Default xl = 18 */
    --text-body-small-size:   var(--size-16);   /* Body Small xl = 16 */
    --text-overline-size:     var(--size-24);   /* Overline xl = 24 */
    --text-label-size:        14px;
    --text-subheading-size:   var(--size-26);   /* Subheading xl = 26 */
  }
}

/* 2xl: ≥ 1601px — Figma 2xl breakpoint (Layout/Screen min-width). Was incorrectly
   2400px — see the md block above for the full explanation. */
@media (min-width: 1601px) {
  :root {
    --container:              2400px;
    --gutter:                 var(--size-64);   /* Layout/Gutter 2xl = 64 */
    --space-section:          var(--size-54);   /* Space/Section 2xl = 54 */
    --padding-section:        var(--size-54);   /* Padding/Section 2xl = 54 */
    --space-section-large:    var(--size-128);  /* Padding/Section Large 2xl = 128 */
    --space-list-gap:         var(--size-54);   /* Padding/List Gap 2xl = 54 */
    --padding-container-vertical-2: var(--size-16); /* Padding/Container Vertical Padding 2 2xl = 16 */
    --img-hero-height:               var(--size-800);   /* IMG Size/Hero Height 2xl = 800 */
    --img-hero-width:                var(--size-2400);  /* IMG Size/Hero Width 2xl = 2400 */
    --img-key-considerations-height: var(--size-2000);  /* IMG Size/Key Considerations Height 2xl = 2000 */
    --img-key-considerations-width:  var(--size-2000);  /* IMG Size/Key Considerations Width 2xl = 2000 */
    --img-bento-col2-max:            var(--size-250);   /* IMG Size/Bento Col 2 Max-Width 2xl = 250 */
    --text-display-size:      var(--size-96);   /* Display 2xl = 96 */
    --text-h1-display-size:   var(--size-72);   /* H1 Display 2xl = 72 */
    --text-h1-size:           var(--size-72);   /* H1 2xl = 72 */
    --text-h2-size:           var(--size-64);   /* H2 2xl = 64 */
    --text-h3-size:           var(--size-54);   /* H3 2xl = 54 */
    --text-h4-size:           var(--size-32);   /* H4 2xl = 32 */
    --text-body-lg-size:      var(--size-20);   /* Body LG 2xl = 20 */
    --text-body-default-size:         var(--size-18);   /* Body Default 2xl = 18 */
    --text-body-small-size:   var(--size-16);   /* Body Small 2xl = 16 */
    --text-overline-size:     var(--size-20);   /* Overline 2xl = 20 */
    --text-label-size:        14px;
    --text-subheading-size:   var(--size-28);   /* Subheading 2xl = 28 */
  }
}