/* ============================================================
   丁丁藥局 TinTin Drugstore — Web fonts
   ------------------------------------------------------------
   Latin display / numerals: Navigo   — brand typeface (self-hosted)
   Chinese (primary, Taiwan):  Noto Sans TC — from Google Fonts
   ============================================================ */

/* ---- Navigo (7 weights, woff2/woff/ttf) -------------------- */
@font-face {
  font-family: 'Navigo';
  src: url('../assets/fonts/navigo/Navigo-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Navigo';
  src: url('../assets/fonts/navigo/Navigo-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Navigo';
  src: url('../assets/fonts/navigo/Navigo-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Navigo';
  src: url('../assets/fonts/navigo/Navigo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Navigo';
  src: url('../assets/fonts/navigo/Navigo-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Navigo';
  src: url('../assets/fonts/navigo/Navigo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Navigo';
  src: url('../assets/fonts/navigo/Navigo-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



/* ============================================================
   丁丁藥局 TinTin Drugstore — Color tokens
   Brand: trustworthy medical blue + friendly health green.
   Tone brief: 現代化 + 科技化, 色調要平易近人 (approachable).
   ============================================================ */
:root {
  /* ---- Brand primary: TinTin Blue ---------------------------- */
  --tt-blue-50:  #E8F3FA;
  --tt-blue-100: #C9E3F3;
  --tt-blue-200: #97C8E6;
  --tt-blue-300: #5BA8D6;
  --tt-blue-400: #2389C4;
  --tt-blue-500: #0072B6;   /* ← core brand blue (logo tile) */
  --tt-blue-600: #005E97;
  --tt-blue-700: #004B79;
  --tt-blue-800: #003858;
  --tt-blue-900: #00263C;

  /* ---- Brand secondary: TinTin Green (health / the "+" cross) - */
  --tt-green-50:  #EBF7F1;
  --tt-green-100: #D5EFE2;
  --tt-green-200: #ABDFC4;
  --tt-green-300: #8FD3B3;
  --tt-green-400: #6FBF9B;  /* ← core brand green (logo cross) */
  --tt-green-500: #4FA980;
  --tt-green-600: #3C8A66;
  --tt-green-700: #2E6E51;

  /* ---- Neutrals: cool-tinted, calm and clinical ------------- */
  --tt-ink:       #16252E;  /* near-black text */
  --tt-gray-900:  #1F313B;
  --tt-gray-800:  #33454F;
  --tt-gray-700:  #4D6069;
  --tt-gray-600:  #6B7E88;
  --tt-gray-500:  #8B9CA5;
  --tt-gray-400:  #AEBCC4;
  --tt-gray-300:  #CDD8DE;
  --tt-gray-200:  #E2EAEF;
  --tt-gray-100:  #EFF4F7;
  --tt-gray-50:   #F6F9FB;
  --tt-white:     #FFFFFF;

  /* ---- Semantic status -------------------------------------- */
  --tt-success:   #3C9E6E;
  --tt-success-bg:#E7F5EE;
  --tt-warning:   #E89A2E;
  --tt-warning-bg:#FCF1DF;
  --tt-danger:    #DB5048;
  --tt-danger-bg: #FBE9E8;
  --tt-info:      var(--tt-blue-500);
  --tt-info-bg:   var(--tt-blue-50);

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */
  --color-brand:           var(--tt-blue-500);
  --color-brand-hover:      var(--tt-blue-600);
  --color-brand-active:     var(--tt-blue-700);
  --color-brand-subtle:     var(--tt-blue-50);
  --color-accent:           var(--tt-green-400);
  --color-accent-strong:    var(--tt-green-600);
  --color-accent-subtle:    var(--tt-green-50);

  --text-strong:   var(--tt-ink);
  --text-body:     var(--tt-gray-800);
  --text-muted:    var(--tt-gray-600);
  --text-faint:    var(--tt-gray-500);
  --text-on-brand: var(--tt-white);
  --text-link:     var(--tt-blue-600);

  --surface-page:    var(--tt-gray-50);
  --surface-card:    var(--tt-white);
  --surface-sunken:  var(--tt-gray-100);
  --surface-brand:   var(--tt-blue-500);
  --surface-inverse: var(--tt-gray-900);

  --border-subtle:  var(--tt-gray-200);
  --border-default: var(--tt-gray-300);
  --border-strong:  var(--tt-gray-400);
  --border-brand:   var(--tt-blue-500);

  --focus-ring: 0 0 0 3px rgba(0, 114, 182, 0.30);
}

/* ============================================================
   丁丁藥局 TinTin Drugstore — Typography tokens
   Chinese-first (Noto Sans TC) with Poppins for display & numerals.
   ============================================================ */
:root {
  /* ---- Families --------------------------------------------- */
  --font-display: 'Navigo', 'Noto Sans TC', system-ui, sans-serif;   /* headings, English lockups */
  --font-sans:    'Noto Sans TC', 'Navigo', system-ui, sans-serif;    /* body, UI — Chinese workhorse */
  --font-number:  'Navigo', 'Noto Sans TC', system-ui, sans-serif;    /* prices, stats, numerals */

  /* ---- Weights ---------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;

  /* ---- Type scale (px) — comfortable, generous for legibility */
  --text-display: 40px;
  --text-h1:      32px;
  --text-h2:      26px;
  --text-h3:      21px;
  --text-title:   18px;
  --text-body-lg: 17px;
  --text-base:    15px;
  --text-sm:      13px;
  --text-xs:      12px;

  /* ---- Line heights ----------------------------------------- */
  --leading-tight:  1.18;
  --leading-snug:   1.35;
  --leading-normal: 1.6;   /* CJK body needs roomy leading */
  --leading-loose:  1.8;

  /* ---- Letter spacing --------------------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* uppercase Latin eyebrows */
}

/* ============================================================
   丁丁藥局 TinTin Drugstore — Spacing & sizing tokens
   8pt base grid with a 4px half-step for tight UI.
   ============================================================ */
:root {
  --space-0:   0;
  --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-20:  80px;
  --space-24:  96px;

  /* ---- Layout ----------------------------------------------- */
  --container-max: 1120px;
  --gutter:        24px;
  --app-width:     390px;   /* mobile app canvas */

  /* ---- Control heights -------------------------------------- */
  --control-sm: 36px;
  --control-md: 44px;   /* min touch target */
  --control-lg: 52px;
}

/* ============================================================
   丁丁藥局 TinTin Drugstore — Radius, shadow & motion tokens
   Soft, rounded, approachable. Shadows are tinted with brand blue
   so elevation feels warm rather than gray.
   ============================================================ */
:root {
  /* ---- Corner radii ----------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* default card / input */
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Elevation — blue-tinted, low-contrast ---------------- */
  --shadow-xs: 0 1px 2px rgba(16, 37, 46, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 37, 46, 0.07);
  --shadow-md: 0 6px 18px rgba(0, 64, 110, 0.10);
  --shadow-lg: 0 14px 36px rgba(0, 64, 110, 0.14);
  --shadow-brand: 0 8px 22px rgba(0, 114, 182, 0.28);   /* on primary buttons */

  /* ---- Motion ----------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);    /* @kind other */
  --ease-emphasis: cubic-bezier(0.3, 0.7, 0, 1);  /* @kind other */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --duration-fast:   120ms;  /* @kind other */
  --duration-normal: 200ms;  /* @kind other */
  --duration-slow:   320ms;  /* @kind other */
}

/* ============================================================
   丁丁藥局 TinTin Drugstore — Base element styles & helpers
   Light resets + brand defaults. Imported last from styles.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  font-weight: var(--weight-bold);
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--tt-blue-100); color: var(--tt-blue-800); }

/* ---- Utility: brand eyebrow (uppercase Latin label) -------- */
.tt-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ---- Utility: numeric / price -------------------------------*/
.tt-num {
  font-family: var(--font-number);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.wrap { max-width: var(--container-max, 1120px); margin: 0 auto; padding: 0 var(--space-5); }

  header.top { position: sticky; top: 0; z-index: 10; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
  header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  header.top img { height: 40px; display: block; }
  header.top nav { display: flex; gap: var(--space-6); }
  header.top nav a { color: var(--text-body); font-weight: var(--weight-medium); }
  header.top nav a:hover { color: var(--color-brand); text-decoration: none; }

  .hero { background: var(--surface-brand); color: var(--text-on-brand); position: relative; overflow: hidden; }
  .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
  .hero::before { width: 420px; height: 420px; right: -120px; top: -140px; }
  .hero::after { width: 240px; height: 240px; right: 180px; bottom: -120px; }
  .hero .wrap { position: relative; z-index: 1; padding-top: var(--space-24); padding-bottom: var(--space-24); }
  .hero .tt-eyebrow { color: var(--tt-green-200); }
  .hero h1 { color: #fff; font-size: var(--text-display); margin: var(--space-3) 0 var(--space-4); }
  .hero p { font-size: var(--text-body-lg); max-width: 520px; margin: 0 0 var(--space-8); color: var(--tt-blue-50); }

  .btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-lg); padding: 0 var(--space-6);
         border-radius: var(--radius-pill); font-weight: var(--weight-bold); font-size: var(--text-base);
         transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-normal) var(--ease-standard); }
  .btn:hover { text-decoration: none; }
  .btn:active { transform: scale(.97); }
  .btn-white { background: #fff; color: var(--color-brand); }
  .btn-white:hover { background: var(--tt-blue-50); }
  .btn-primary { background: var(--color-brand); color: #fff; box-shadow: var(--shadow-brand); }
  .btn-primary:hover { background: var(--color-brand-hover); }
  .btn-green { background: var(--color-accent-strong); color: #fff; }
  .btn-green:hover { background: var(--tt-green-700); }
  .hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .btn-outline-white { border: 2px solid rgba(255,255,255,.7); color: #fff; }
  .btn-outline-white:hover { background: rgba(255,255,255,.12); }

  section.links { padding: var(--space-20) 0; }
  section.links h2 { font-size: var(--text-h1); text-align: center; }
  section.links .sub { text-align: center; color: var(--text-muted); margin: 0 0 var(--space-10); }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); max-width: 1040px; margin: 0 auto; }
  .card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
          box-shadow: var(--shadow-xs); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3);
          transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .card .icon { width: 56px; height: 56px; border-radius: var(--radius-md); display: grid; place-items: center; margin-bottom: var(--space-2); }
  .card .icon.blue { background: var(--color-brand-subtle); color: var(--color-brand); }
  .card .icon.green { background: var(--color-accent-subtle); color: var(--color-accent-strong); }
  .card h3 { font-size: var(--text-h3); margin: 0; }
  .card p { margin: 0 0 var(--space-4); color: var(--text-muted); flex: 1; }
  .card .btn { align-self: flex-start; }

  footer { background: var(--surface-brand); color: var(--tt-blue-50); padding: var(--space-10) 0; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; align-items: center; }
  footer .logo-pill { background: #fff; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5); display: inline-flex; }
  footer img { height: 32px; display: block; }
  footer .contact { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  footer .contact h3 { color: #fff; margin: 0; }
  footer .contact ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); width: 100%; }
  footer .contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  footer .contact a:hover { color: var(--tt-green-200); }
  footer .contact li svg { flex-shrink: 0; }
  footer .contact li { display: flex; gap: var(--space-2); align-items: center; }
  footer .contact small { border-top: 1px solid rgba(255,255,255,.25); padding-top: var(--space-4); width: 100%; }
  footer small { font-size: var(--text-sm); }

  @media (max-width: 640px) {
    header.top nav { gap: var(--space-4); font-size: var(--text-sm); }
    header.top img { height: 32px; }
    .hero .wrap { padding-top: var(--space-16); padding-bottom: var(--space-16); }
    .hero h1 { font-size: var(--text-h1); }
  }

.history { padding: var(--space-20) 0; background: var(--surface-card); }
  .history h2 { font-size: var(--text-h1); text-align: center; }
  .history .sub { text-align: center; color: var(--text-muted); max-width: 640px; margin: 0 auto var(--space-8); }
  .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-10); }
  .tabs button { font: inherit; font-weight: var(--weight-medium); height: var(--control-md); padding: 0 var(--space-5);
                 border-radius: var(--radius-pill); border: 1.5px solid var(--color-brand); background: transparent; color: var(--color-brand); cursor: pointer;
                 transition: background var(--duration-normal) var(--ease-standard), color var(--duration-normal) var(--ease-standard); }
  .tabs button:hover { background: var(--color-brand-subtle); }
  .tabs button[aria-selected="true"] { background: var(--color-brand); color: #fff; }
  .carousel { position: relative; padding: 0 var(--space-12); }
  .hist-grid { --per: 3; display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
  .hist-grid::-webkit-scrollbar { display: none; }
  .hist-item { flex: 0 0 calc((100% - (var(--per) - 1) * var(--space-6)) / var(--per)); scroll-snap-align: start; }
  .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-default);
           background: var(--surface-card); color: var(--text-strong); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-xs); }
  .arrow:hover { background: var(--color-brand-subtle); }
  .arrow:disabled { opacity: .35; cursor: default; background: var(--surface-card); }
  .arrow.prev { left: 0; } .arrow.next { right: 0; }
  @media (max-width: 900px) { .hist-grid { --per: 2; } }
  @media (max-width: 600px) { .hist-grid { --per: 1; } .carousel { padding: 0 var(--space-10); } .arrow { width: 36px; height: 36px; } }
  .hist-item { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
  .hist-item img { width: 100%; border-radius: var(--radius-md); margin-bottom: var(--space-4); display: block; }
  .hist-item h3 { font-family: var(--font-number); color: var(--color-brand); font-size: var(--text-h3); margin: 0 0 var(--space-3); }
  .hist-item ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-2); }

.edu { padding: var(--space-20) 0; }
  .edu h2 { font-size: var(--text-h1); text-align: center; }
  .edu .sub { text-align: center; color: var(--text-muted); max-width: 680px; margin: 0 auto var(--space-10); }
  .edu-row { --tone: var(--tt-blue-800); display: grid; grid-template-columns: 160px 1fr; gap: var(--space-6); align-items: start; margin-bottom: var(--space-6); }
  .edu-row.blue { --tone: var(--tt-blue-500); }
  .edu-row.green { --tone: var(--tt-green-600); }
  .edu-badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; font-weight: var(--weight-bold); color: var(--text-strong); }
  .hex { width: 88px; height: 100px; background: var(--tone); color: #fff; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .edu-panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); }
  .edu-panel summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
  .edu-panel summary::-webkit-details-marker { display: none; }
  .edu-panel h3 { color: var(--tone); font-size: var(--text-title); margin: 0 0 var(--space-1); }
  .edu-panel .hours { margin: 0; color: var(--text-muted); font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); }
  .edu-panel .chev { flex-shrink: 0; margin-top: 4px; transition: transform var(--duration-normal) var(--ease-standard); }
  .edu-panel:not([open]) .chev { transform: rotate(180deg); }
  .edu-panel dl { margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); display: grid; grid-template-columns: auto 1fr; gap: var(--space-4) var(--space-5); align-items: start; }
  .edu-panel dt, .edu-panel dd { margin: 0; }
  .edu-panel .pill { display: inline-block; background: var(--tone); color: #fff; border-radius: var(--radius-pill); padding: 2px var(--space-4); font-size: var(--text-sm); }
  .edu-panel dd > div + div { margin-top: var(--space-2); }
  @media (max-width: 700px) {
    .edu-row { grid-template-columns: 1fr; }
    .edu-badge { flex-direction: row; justify-content: flex-start; }
    .hex { width: 56px; height: 64px; } .hex svg { width: 24px; height: 24px; }
    .edu-panel { padding: var(--space-5); }
  }

.page-hero { background: var(--surface-brand); color: #fff; }
  .page-hero .wrap { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .page-hero h1 { color: #fff; margin: var(--space-2) 0 0; font-size: var(--text-h1); }
  .page-hero .tt-eyebrow { color: var(--tt-green-200); }

  .stores { padding: var(--space-10) 0 var(--space-20); }
  .filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
  .filters input, .filters select {
    height: var(--control-md); border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    padding: 0 var(--space-5); font: inherit; background: var(--surface-card); color: var(--text-strong); }
  .filters input { flex: 1; min-width: 220px; }
  .filters input:focus, .filters select:focus { outline: none; border-color: var(--border-brand); box-shadow: var(--focus-ring); }
  .count { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }

  .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
  .store { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
           box-shadow: var(--shadow-xs); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
  .store h3 { margin: 0; font-size: var(--text-title); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .tag { font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--color-brand-subtle); color: var(--color-brand-hover);
         border-radius: var(--radius-pill); padding: 2px var(--space-3); }
  .store ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
  .store li { display: flex; gap: var(--space-2); align-items: flex-start; }
  .store li svg { flex-shrink: 0; margin-top: 3px; color: var(--color-brand); }
  .store .map { margin-top: auto; align-self: flex-start; font-weight: var(--weight-medium); font-size: var(--text-sm); }
  .state { text-align: center; color: var(--text-muted); padding: var(--space-16) 0; }

/* ---- 最新公告 ---- */
.news { padding: var(--space-16) 0 var(--space-4); }
.news[hidden] { display: none; }
.news h2 { font-size: var(--text-h1); text-align: center; margin-bottom: var(--space-8); }
.news-list { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.news-list li { display: flex; gap: var(--space-6); padding: var(--space-5) var(--space-8); }
.news-list li + li { border-top: 1px solid var(--border-subtle); }
.news-list time { flex: 0 0 auto; font-family: var(--font-number); font-variant-numeric: tabular-nums; color: var(--color-brand); font-weight: var(--weight-bold); min-width: 6.5em; }
.news-list h3 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); }
.news-list h3 a { color: var(--text-strong); }
.news-list h3 a:hover { color: var(--color-brand); }
.news-list p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-sm); }
@media (max-width: 600px) { .news-list li { flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); } }