@charset "UTF-8";

/*====================================================================================
 * DESIGN TOKENS — Generated from js/tokens.json
 * Format : DTCG (Design Token Community Group W3C spec)
 * Project: FLIX Food plus / 株式会社フリックス フードプラス
====================================================================================*/

:root {

  /* ============================================================================
   * PRIMITIVE
   * ========================================================================== */

  /* --------------------------------------------------------------------------
   * Color: Primary — Brand Orange (#E8641E ロゴ準拠)
   * ------------------------------------------------------------------------ */
  --color-primary-0:   #FFFFFF;
  --color-primary-50:  #FFF8F4;
  --color-primary-100: #FFE9D9;
  --color-primary-200: #FFCCA8;
  --color-primary-300: #FFA872;
  --color-primary-400: #F57C3A;
  --color-primary-500: #E8641E; /* Base — ブランドカラー基準値 */
  --color-primary-600: #C04E10;
  --color-primary-700: #983B09;
  --color-primary-800: #6E2904;
  --color-primary-900: #461800;
  --color-primary-950: #200A00;

  /* --------------------------------------------------------------------------
   * Color: Neutral — Warm Gray
   * ------------------------------------------------------------------------ */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F9F8F7;
  --color-neutral-100: #F2F0EE;
  --color-neutral-200: #E2DED8;
  --color-neutral-300: #C8C3BB;
  --color-neutral-400: #A09890;
  --color-neutral-500: #7A7268;
  --color-neutral-600: #5C5650;
  --color-neutral-700: #433F3A;
  --color-neutral-800: #2E2B27;
  --color-neutral-900: #1C1A17;
  --color-neutral-950: #0E0D0B;

  /* --------------------------------------------------------------------------
   * Color: Navy — Secondary Navy
   * ------------------------------------------------------------------------ */
  --color-navy-0:   #FFFFFF;
  --color-navy-50:  #EDF0F7;
  --color-navy-100: #D5DCF0;
  --color-navy-200: #A4B4DC;
  --color-navy-300: #6D87C4;
  --color-navy-400: #4060A8;
  --color-navy-500: #2B4888;
  --color-navy-600: #1F3570;
  --color-navy-700: #172858;
  --color-navy-800: #101D40; /* Base — ヘッダーバー・暗色セクション */
  --color-navy-900: #0A1228;
  --color-navy-950: #050915;

  /* --------------------------------------------------------------------------
   * Color: Blue — Info
   * ------------------------------------------------------------------------ */
  --color-blue-0:   #FFFFFF;
  --color-blue-50:  #EFF6FF;
  --color-blue-100: #DBEAFE;
  --color-blue-200: #BFDBFE;
  --color-blue-300: #93C5FD;
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;
  --color-blue-800: #1E40AF;
  --color-blue-900: #1E3A8A;
  --color-blue-950: #172554;

  /* --------------------------------------------------------------------------
   * Color: Green — Success
   * ------------------------------------------------------------------------ */
  --color-green-0:   #FFFFFF;
  --color-green-50:  #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-300: #86EFAC;
  --color-green-400: #4ADE80;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;
  --color-green-700: #15803D;
  --color-green-800: #166534;
  --color-green-900: #14532D;
  --color-green-950: #052E16;

  /* --------------------------------------------------------------------------
   * Color: Yellow — Warning
   * ------------------------------------------------------------------------ */
  --color-yellow-0:   #FFFFFF;
  --color-yellow-50:  #FFFBEB;
  --color-yellow-100: #FEF3C7;
  --color-yellow-200: #FDE68A;
  --color-yellow-300: #FCD34D;
  --color-yellow-400: #FBBF24;
  --color-yellow-500: #F59E0B;
  --color-yellow-600: #D97706;
  --color-yellow-700: #B45309;
  --color-yellow-800: #92400E;
  --color-yellow-900: #78350F;
  --color-yellow-950: #451A03;

  /* --------------------------------------------------------------------------
   * Color: Red — Error
   * ------------------------------------------------------------------------ */
  --color-red-0:   #FFFFFF;
  --color-red-50:  #FFF1F2;
  --color-red-100: #FFE4E6;
  --color-red-200: #FECDD3;
  --color-red-300: #FDA4AF;
  --color-red-400: #FB7185;
  --color-red-500: #F43F5E;
  --color-red-600: #E11D48;
  --color-red-700: #BE123C;
  --color-red-800: #9F1239;
  --color-red-900: #881337;
  --color-red-950: #4C0519;

  /* --------------------------------------------------------------------------
   * Typography: Font Family
   * ------------------------------------------------------------------------ */
  --font-family-ja:   "Noto Sans JP";
  --font-family-en:   "Lato";
  --font-family-base: var(--font-family-en), var(--font-family-ja), sans-serif;

  /* --------------------------------------------------------------------------
   * Typography: Font Size
   * ------------------------------------------------------------------------ */
  --font-size-4xs:  10px;
  --font-size-3xs:  11px;
  --font-size-2xs:  12px;
  --font-size-xs:   13px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-md:   18px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  36px;
  --font-size-4xl:  48px;
  --font-size-hero: 64px;

  /* --------------------------------------------------------------------------
   * Typography: Font Weight
   * ------------------------------------------------------------------------ */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* --------------------------------------------------------------------------
   * Typography: Line Height
   * ------------------------------------------------------------------------ */
  --line-height-tight: 1.2;
  --line-height-snug:  1.4;
  --line-height-base:  1.75;
  --line-height-loose: 2;

  /* --------------------------------------------------------------------------
   * Typography: Letter Spacing
   * ------------------------------------------------------------------------ */
  --letter-spacing-tight:  -0.048em;
  --letter-spacing-base:    0;
  --letter-spacing-relaxed: 0.024em;
  --letter-spacing-loose:   0.048em;
  --letter-spacing-wide:    0.096em;
  --letter-spacing-wider:   0.192em;
  --letter-spacing-widest:  0.32em;

  /* --------------------------------------------------------------------------
   * Spacing — 4px ベーススペーシングスケール
   * ------------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* --------------------------------------------------------------------------
   * Border Radius
   * ------------------------------------------------------------------------ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;    /* ボタン・ログイン */
  --radius-md:   6px;
  --radius-lg:   8px;    /* カード */
  --radius-xl:   12px;   /* モーダル */
  --radius-full: 9999px; /* pill */

  /* --------------------------------------------------------------------------
   * Shadow — エレベーションスケール
   * ------------------------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);  /* input / badge */
  --shadow-2: 0 2px 8px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.06);  /* card / panel */
  --shadow-3: 0 6px 24px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.06);   /* hover card / dropdown */
  --shadow-4: 0 8px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);   /* modal / drawer */

  --color-backdrop: rgba(32, 32, 32, 0.3);

  /* ============================================================================
   * SEMANTIC
   * ========================================================================== */

  /* --------------------------------------------------------------------------
   * Background
   * ------------------------------------------------------------------------ */
  --bg-base:     var(--color-neutral-0);
  --bg-surface:  var(--color-neutral-50);
  --bg-subtle:   var(--color-neutral-50);
  --bg-muted:    var(--color-neutral-100);
  --bg-disabled: var(--color-neutral-200);

  /* --------------------------------------------------------------------------
   * Border
   * ------------------------------------------------------------------------ */
  --border-default: var(--color-neutral-200);
  --border-sub:     var(--color-neutral-100);
  --border-strong:  var(--color-neutral-300);

  /* --------------------------------------------------------------------------
   * Text
   * ------------------------------------------------------------------------ */
  --text-body:      var(--color-neutral-800);
  --text-primary:   var(--color-neutral-800);
  --text-secondary: var(--color-neutral-600);
  --text-hint:      var(--color-neutral-400);
  --text-on-dark:   var(--color-neutral-0);

  /* --------------------------------------------------------------------------
   * Brand (Primary)
   * ------------------------------------------------------------------------ */
  --brand-default:  var(--color-primary-500); /* CTAボタン・アクセント基準 */
  --brand-hover:    var(--color-primary-600);
  --brand-subtle:   var(--color-primary-50);
  --brand-text:     var(--color-primary-600);
  --brand-border:   var(--color-primary-200);
  --brand-on-brand: var(--color-neutral-0);   /* ブランド背景上のテキスト */
  --brand-corporate: #3114B5; /* コーポレートロゴ */

  /* --------------------------------------------------------------------------
   * Secondary (Navy) — Catering・CTAセクション
   * ------------------------------------------------------------------------ */
  --secondary-bg-solid:   var(--color-navy-800); /* 暗色セクション背景 */
  --secondary-bg-darkest: var(--color-navy-950);
  --secondary-text:       var(--color-navy-600);
  --secondary-border:     var(--color-navy-200);
  --secondary-hover:      var(--color-blue-700);
  --secondary-on-solid:   var(--color-neutral-0);

  /* --------------------------------------------------------------------------
   * Gradients
   * ------------------------------------------------------------------------ */
  --grad-corp:   linear-gradient(180deg, rgba(30, 64, 175, 0.90), #3114B5);
  --grad-red:    linear-gradient(180deg, rgba(244, 63, 94, 0.90) 0%, rgba(225, 29, 72, 0.90) 50%, rgba(159, 18, 57, 0.90) 100%);
  --grad-orange: linear-gradient(180deg, rgba(230, 127, 72, 0.90) 0%, rgba(232, 100, 30, 0.90) 50%, rgba(192, 78, 16, 0.90) 100%);
  --grad-blue:   linear-gradient(180deg, rgba(59, 130, 246, 0.90) 0%, rgba(29, 78, 216, 0.90) 50%, rgba(30, 64, 175, 0.90) 100%);
  --grad-green:  linear-gradient(180deg, rgba(22, 163, 74, 0.90), rgba(21, 128, 61, 0.90) 50%, rgba(22, 101, 52, 0.90) 100%);

  --grad-nega:   linear-gradient(180deg, #7A7268 0%, #5C5650 50%, #433F3A 100%);

  --grad-hot:    linear-gradient(180deg, rgba(69, 26, 3, 0.75) 0%, rgba(232, 100, 30, 0.50) 50%, rgba(32, 10, 0, 0.75) 100%);
  --grad-ice:    linear-gradient(180deg, rgba(5, 9, 21, 0.00) 0%, rgba(5, 9, 21, 0.75) 0%, rgba(5, 9, 21, 0.63) 25%, rgba(31, 53, 112, 0.50) 50%, rgba(5, 9, 21, 0.75) 100%);

  --grad-hol-corp:   linear-gradient(270deg, rgba(30, 64, 175, 0.90), #3114B5);
  --grad-hol-red:    linear-gradient(270deg, rgba(244, 63, 94, 0.90) 0%, rgba(225, 29, 72, 0.90) 50%, rgba(159, 18, 57, 0.90) 100%);
  --grad-hol-orange: linear-gradient(270deg, rgba(230, 127, 72, 0.90) 0%, rgba(232, 100, 30, 0.90) 50%, rgba(192, 78, 16, 0.90) 100%);
  --grad-hol-blue:   linear-gradient(270deg, rgba(59, 130, 246, 0.90) 0%, rgba(29, 78, 216, 0.90) 50%, rgba(30, 64, 175, 0.90) 100%);
  --grad-hol-green:  linear-gradient(270deg, rgba(22, 163, 74, 0.90), rgba(21, 128, 61, 0.90) 50%, rgba(22, 101, 52, 0.90) 100%);


  /* --------------------------------------------------------------------------
   * Status
   * ------------------------------------------------------------------------ */
  /* Info */
  --status-info-bg:     var(--color-blue-50);
  --status-info-border: var(--color-blue-200);
  --status-info-text:   var(--color-blue-800);
  --status-info-solid:  var(--color-blue-500);

  /* Notice */
  --status-notice-bg:     var(--color-navy-50);
  --status-notice-border: var(--color-navy-200);
  --status-notice-text:   var(--color-navy-800);
  --status-notice-solid:  var(--color-navy-600);

  /* Success */
  --status-success-bg:     var(--color-green-50);
  --status-success-border: var(--color-green-200);
  --status-success-text:   var(--color-green-800);
  --status-success-solid:  var(--color-green-600);

  /* Warning */
  --status-warning-bg:     var(--color-yellow-50);
  --status-warning-border: var(--color-yellow-200);
  --status-warning-text:   var(--color-yellow-800);
  --status-warning-solid:  var(--color-yellow-500);

  /* Error */
  --status-error-bg:     var(--color-red-50);
  --status-error-border: var(--color-red-200);
  --status-error-text:   var(--color-red-800);
  --status-error-solid:  var(--color-red-600);

  /* cta */
  --cta-navy:      var(--color-navy-700);
  --cta-navy-dark: var(--color-navy-900);

  /* --------------------------------------------------------------------------
   * Typography Styles
   * ------------------------------------------------------------------------ */
  --typography-font-family-base: var(--font-family-base);
  --typography-font-family-ja: var(--font-family-ja), sans-serif;
  --typography-font-family-en: var(--font-family-en), sans-serif;

  /* hero */
  --typography-hero-font-size:      min(var(--font-size-hero), 7.5vw);
  --typography-hero-font-weight:    var(--font-weight-bold);
  --typography-hero-line-height:    var(--line-height-snug);
  --typography-hero-letter-spacing: var(--letter-spacing-tight);
  --typography-hero-color:          var(--text-primary);

  /* heading */
  --typography-heading-font-size:      min(var(--font-size-4xl), 8vw);
  --typography-heading-font-weight:    var(--font-weight-bold);
  --typography-heading-line-height:    var(--line-height-snug);
  --typography-heading-letter-spacing: var(--letter-spacing-relaxed);
  --typography-heading-color:          var(--text-primary);

  /* h1 */
  --typography-h1-font-size:      var(--font-size-2xl);
  --typography-h1-font-weight:    var(--font-weight-bold);
  --typography-h1-line-height:    var(--line-height-snug);
  --typography-h1-letter-spacing: var(--letter-spacing-tight);
  --typography-h1-color:          var(--text-primary);

  /* h2 */
  --typography-h2-font-size:      var(--font-size-xl);
  --typography-h2-font-weight:    var(--font-weight-bold);
  --typography-h2-line-height:    var(--line-height-snug);
  --typography-h2-letter-spacing: var(--letter-spacing-tight);
  --typography-h2-color:          var(--text-primary);

  /* h3 */
  --typography-h3-font-size:      var(--font-size-lg);
  --typography-h3-font-weight:    var(--font-weight-bold);
  --typography-h3-line-height:    var(--line-height-snug);
  --typography-h3-letter-spacing: var(--letter-spacing-base);
  --typography-h3-color:          var(--text-primary);

  /* body-lg */
  --typography-body-lg-font-size:      var(--font-size-md);
  --typography-body-lg-font-weight:    var(--font-weight-regular);
  --typography-body-lg-line-height:    var(--line-height-loose);
  --typography-body-lg-letter-spacing: var(--letter-spacing-base);
  --typography-body-lg-color:          var(--text-secondary);

  /* body-base */
  --typography-body-base-font-size:      var(--font-size-base);
  --typography-body-base-font-weight:    var(--font-weight-regular);
  --typography-body-base-line-height:    var(--line-height-base);
  --typography-body-base-letter-spacing: var(--letter-spacing-base);
  --typography-body-base-color:          var(--text-secondary);

  /* body-sm */
  --typography-body-sm-font-size:      var(--font-size-sm);
  --typography-body-sm-font-weight:    var(--font-weight-regular);
  --typography-body-sm-line-height:    var(--line-height-base);
  --typography-body-sm-letter-spacing: var(--letter-spacing-base);
  --typography-body-sm-color:          var(--text-secondary);

  /* label — eyebrow ラベル (大文字なし、字間広め) */
  --typography-label-font-size:      var(--font-size-xs);
  --typography-label-font-weight:    var(--font-weight-bold);
  --typography-label-line-height:    var(--line-height-base);
  --typography-label-letter-spacing: var(--letter-spacing-widest);
  --typography-label-color:          var(--brand-default);

  /* caption */
  --typography-caption-font-size:      var(--font-size-xs);
  --typography-caption-font-weight:    var(--font-weight-regular);
  --typography-caption-line-height:    var(--line-height-base);
  --typography-caption-letter-spacing: var(--letter-spacing-wide);
  --typography-caption-color:          var(--text-hint);

  /* nav */
  --typography-nav-font-size:      var(--font-size-sm);
  --typography-nav-font-weight:    var(--font-weight-medium);
  --typography-nav-line-height:    var(--line-height-base);
  --typography-nav-letter-spacing: var(--letter-spacing-wide);
  --typography-nav-color:          var(--text-primary);

  /* --------------------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------------------ */
  --layout-header-height:             60px;
  --layout-container-max-w:          640px;
  --layout-section-spacing-y:         72px;
  --layout-section-spacing-y-compact: 48px;


  /* ============================================================================
   * COMPONENT
   * ========================================================================== */

  --l-container-max:     var(--layout-container-max-w);   /* 1152px */
  --l-container-padding: var(--space-4);

  --spacing-sp-50-pc-100: clamp(50px, 7vw, 100px);
  --spacing-sp-25-pc-50:  clamp(25px, 3.5vw, 50px);

  --c-btn-bg:          var(--brand-default);
  --c-btn-color:       var(--brand-on-brand);
  --c-btn-radius:      var(--radius-full);
  --c-btn-padding-v:   var(--space-3);          /* 12px */
  --c-btn-padding-h:   var(--space-8);          /* 32px */
  --c-btn-font-size:   var(--font-size-base);   /* 16px */
  --c-btn-font-weight: var(--font-weight-bold); /* 700  */

  --c-btn-font-family: var(--typography-font-family-ja);
  --c-btn-font-size: var(--typography-body-base-font-size);
  --c-btn-font-style: normal;
  --c-btn-font-weight: var(--font-weight-medium);
  --c-btn-line-height: var(--line-height-base);
  --c-btn-letter-spacing: var(--typography-body-base-letter-spacing);

  --c-section-head-gap: var(--space-3);         /* 12px */

  --c-link-color--primary:   var(--color-primary-500);
  --c-link-color--secondary: var(--color-navy-600);
  --c-link-color--mypage:    var(--color-green-800);
  --c-link-color--search:    var(--color-green-800);
  --c-link-color--submit:    var(--color-red-800);
  --c-link-color--negative:  var(--color-neutral-600);

  --c-btn-bg--primary:   var(--color-yellow-50);
  --c-btn-bg--secondary: var(--color-navy-50);
  --c-btn-bg--corporate: var(--color-blue-50);
  --c-btn-bg--mypage:    var(--color-green-50);
  --c-btn-bg--search:    var(--color-green-50);
  --c-btn-bg--submit:    var(--color-red-50);
  --c-btn-bg--negative:  var(--color-neutral-50);

  --c-btn-filled--primary:   var(--color-primary-500);
  --c-btn-filled--secondary: var(--color-navy-600);
  --c-btn-filled--mypage:    var(--color-green-800);
  --c-btn-filled--search:    var(--color-green-800);
  --c-btn-filled--submit:    var(--color-red-800);
  --c-btn-filled--negative:  var(--color-neutral-600);

  --c-btn-grad--primary:       var(--grad-orange);
  --c-btn-grad--secondary:     var(--grad-blue);
  --c-btn-grad-hol--primary:   var(--grad-hol-orange);
  --c-btn-grad-hol--secondary: var(--grad-hol-blue);
  --c-btn-grad--mypage:        var(--grad-green);
  --c-btn-grad--search:        var(--grad-green);
  --c-btn-grad--submit:        var(--grad-red);
  --c-btn-grad--negative:      var(--grad-nega);

  --c-btn-border--primary:   var(--color-primary-200);
  --c-btn-border--secondary: var(--color-navy-300);
  --c-btn-border--mypage:    var(--color-green-500);
  --c-btn-border--search:    var(--color-green-500);
  --c-btn-border--submit:    var(--color-red-500);
  --c-btn-border--negative:  var(--color-neutral-300);


  /* Card - item */
  --p-item-name-font-size:       var(--font-size-sm);
  --p-item-name-line-height:     21px;
  --p-item-name-color:           var(--text-primary);
  --p-item-name-hover-color:     var(--status-error-solid);

  --p-item-subtext-font-size:    var(--font-size-2xs);
  --p-item-subtext-num-size:     var(--font-size-sm);
  --p-item-subtext-line-height:  21px;
  --p-item-subtext-color:        var(--text-secondary);

  --p-item-amount-font-size:     var(--font-size-2xs);
  --p-item-amount-line-height:   21px;
  --p-item-amount-color:         var(--text-primary);
  --p-item-amount-gap:           var(--space-1);

  --p-item-price-font-size:      var(--font-size-sm);
  --p-item-price-line-height:    32px;
  --p-item-price-color:          var(--status-error-text);

  --p-item-button-font-size:     var(--font-size-sm);
  --p-item-button-line-height:   21px;
  --p-item-button-border-color:  var(--status-error-border);
  --p-item-button-background:    var(--status-error-bg);
  --p-item-button-color:         var(--status-error-text);
  --p-item-button-hover-color:   var(--status-error-solid);

  /* --------------------------------------------------------------------------
   * Product Labels
   * ------------------------------------------------------------------------ */
  --product-cold-bg:    var(--color-blue-50);
  --product-cold-text:  var(--color-blue-800);
  --product-cold-label: var(--color-blue-700);
  --product-warm-bg:    var(--color-yellow-50);
  --product-warm-text:  var(--color-yellow-800);
  --product-warm-label: var(--color-primary-500);

  --z-fixed: 2000;

  --ease-spring: linear(0, 0.0107, 0.0398, 0.0834, 0.138, 0.2003, 0.2677, 0.3379, 0.4089, 0.4791, 0.5471, 0.612, 0.6731, 0.7297, 0.7815, 0.8283, 0.87, 0.9068, 0.9388, 0.9662, 0.9892, 1.0083, 1.0237, 1.0357, 1.0449, 1.0514, 1.0556, 1.058, 1.0587, 1.0581, 1.0563, 1.0538, 1.0506, 1.0469, 1.043, 1.0388, 1.0347, 1.0306, 1.0266, 1.0228, 1.0192, 1.0159, 1.0128, 1.0101, 1.0076, 1.0055, 1.0036, 1.002, 1.0006, 0.9995, 0.9986, 0.9979, 0.9974, 0.997, 0.9967, 0.9966, 0.9966, 0.9966, 0.9967, 0.9968, 0.997, 0.9972, 0.9975, 0.9977, 0.998, 0.9982, 0.9984, 0.9987, 0.9989, 0.9991, 0.9992, 0.9994, 0.9996, 0.9997, 0.9998, 0.9999, 1, 1, 1.0001, 1.0001, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1, 1, 1);
}

@media (width >= 768px) {

:root {
  /* --------------------------------------------------------------------------
   * Typography Styles
   * ------------------------------------------------------------------------ */
  /* hero */
  --typography-hero-font-size: var(--font-size-hero);
  /* heading */
  --typography-heading-font-size: var(--font-size-4xl);

   /* --------------------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------------------ */
   --layout-header-height:             80px;
   --layout-container-max-w:         1152px;
   --layout-section-spacing-y:         96px;
   --layout-section-spacing-y-compact: 64px;
}

}