:root{
--font-display:"Noto Sans HK","PingFang HK","Hiragino Sans",sans-serif;
--font-body:"Noto Sans HK","PingFang HK","Hiragino Sans",sans-serif;
--font-latin:"Space Grotesk","Noto Sans HK",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace
}

:root{
/* brand — sampled from the 香港綠屋 logo */
--green-emerald:#009972;
--green-deep:#007c47;
--lime:#b0cf00;

/* emerald scale */
--emerald-50:#e8f5f0;--emerald-100:#c9e8dd;--emerald-200:#8fd3bf;--emerald-300:#4bbb9c;
--emerald-400:#009972;--emerald-500:#00805f;--emerald-600:#00674d;--emerald-700:#014a38;
/* deep green scale */
--forest-100:#cfe6d9;--forest-300:#4c9c73;--forest-500:#007c47;--forest-700:#02502f;
/* lime scale */
--lime-100:#f0f6cf;--lime-200:#dcea92;--lime-300:#c6de41;--lime-400:#b0cf00;--lime-600:#8aa300;--lime-700:#5f7100;

/* neutrals — warm paper + ink */
--paper-0:#ffffff;--paper-50:#fbfaf7;--paper-100:#f4f2ec;--paper-200:#eae7de;
--line-200:#e2ded3;--line-300:#cfcabc;
--ink-300:#9d9a90;--ink-500:#6a6860;--ink-700:#3b3d38;--ink-900:#1e211d;

/* earth accents */
--soil:#6d5a45;--clay:#b98a5c;--sky-mist:#dfe8e6;--berry:#c8455f;--sun:#e8a72c;

/* semantic surfaces */
--surface-page:var(--paper-50);
--surface-card:var(--paper-0);
--surface-sunken:var(--paper-100);
--surface-inverse:var(--emerald-700);
--surface-accent:var(--emerald-50);
--surface-lime:var(--lime-100);

/* semantic text */
--text-body:var(--ink-700);
--text-heading:var(--ink-900);
--text-muted:var(--ink-500);
--text-subtle:var(--ink-300);
--text-brand:var(--green-emerald);
--text-on-dark:var(--paper-50);
--text-on-brand:#ffffff;

/* semantic borders */
--border-hairline:var(--line-200);
--border-strong:var(--line-300);
--border-brand:var(--green-emerald);
--border-focus:var(--emerald-500);

/* interactive */
--action-primary:var(--green-emerald);
--action-primary-hover:var(--emerald-500);
--action-primary-active:var(--emerald-600);
--action-secondary:var(--forest-500);
--action-accent:var(--lime-400);
--action-disabled:var(--paper-200);

/* status */
--status-grow:var(--green-emerald);
--status-harvest:var(--lime-600);
--status-rest:var(--ink-300);
--status-alert:var(--berry);
--status-warn:var(--sun)
}

/* Illustration-layer palette — sampled from the hand-drawn mascot artwork in assets/characters
   and assets/illustrations. These are the ONLY colours used inside the drawings; the greens in
   tokens/colors.css remain the corporate/system layer. */
:root{
/* characters */
--ink-line:#151515; /* @kind color */
--berry-red:#ee1c1c; /* @kind color */
--berry-red-shade:#c9161a; /* @kind color */
--calyx-green:#176b33; /* @kind color */
--tomato-orange:#f47b18; /* @kind color */
--tomato-cheek:#ee2b20; /* @kind color */
--tomato-green:#1e9e2a; /* @kind color */
--tomato-yellow:#f8c218; /* @kind color */
--bee-yellow:#fbc10e; /* @kind color */
--cheek-pink:#f9506b; /* @kind color */
--gold:#ffb800; /* @kind color */

/* flat poster grounds — one per post, never gradients */
--ground-sage:#c9cfaf; /* @kind color */
--ground-tan:#c9a96b; /* @kind color */
--ground-blue:#6e8ca8; /* @kind color */
--ground-mauve:#a98e96; /* @kind color */
--ground-orange:#f17c00; /* @kind color */
--ground-cny:#d5140c; /* @kind color */
--ground-night:#6f6f6f; /* @kind color */
--ground-soil:#5c3b23; /* @kind color */

/* semantic aliases for the playful layer */
--poster-ground:var(--ground-sage); /* @kind color */
--poster-ink:var(--ink-line); /* @kind color */
--poster-accent:var(--berry-red); /* @kind color */
--bubble-fill:#ffffff; /* @kind color */
--bubble-shadow:#9a9a9a; /* @kind color */
--sign-wood:#c9a96b; /* @kind color */

/* drawing mechanics */
--stroke-outline:8px; /* @kind other */
--stroke-outline-sm:5px; /* @kind other */
--bubble-offset:6px; /* @kind other */
}

:root{
--fs-display-1:clamp(40px,5.4vw,72px); /* @kind font */
--fs-display-2:clamp(32px,4vw,52px); /* @kind font */
--fs-h1:36px; /* @kind font */
--fs-h2:28px; /* @kind font */
--fs-h3:22px; /* @kind font */
--fs-h4:18px; /* @kind font */
--fs-body-lg:17px; /* @kind font */
--fs-body:15px; /* @kind font */
--fs-body-sm:13.5px; /* @kind font */
--fs-caption:12px; /* @kind font */
--fs-micro:11px; /* @kind font */
--lh-display:1.18; /* @kind other */
--lh-heading:1.35; /* @kind other */
--lh-body:1.85; /* @kind other */
--lh-tight:1.5; /* @kind other */
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-bold:700; /* @kind font */
--ls-display:0.02em; /* @kind other */
--ls-heading:0.04em; /* @kind other */
--ls-body:0.015em; /* @kind other */
--ls-latin-wide:0.24em; /* @kind other */
--ls-label:0.14em; /* @kind other */
--type-display:var(--fw-light) var(--fs-display-1)/var(--lh-display) var(--font-display); /* @kind font */
--type-h2:var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind font */
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); /* @kind font */
--type-label:var(--fw-medium) var(--fs-micro)/1.4 var(--font-latin); /* @kind font */
--type-mono:var(--fw-regular) var(--fs-caption)/1.6 var(--font-mono) /* @kind font */
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:144px;

--gutter-page:clamp(20px,6vw,80px); /* @kind spacing */
--measure-text:64ch;
--container-max:1240px;
--container-narrow:720px;

--radius-none:0;--radius-xs:2px;--radius-sm:3px;--radius-md:6px;--radius-lg:10px;--radius-pill:999px;

--border-w-hair:1px;--border-w-thick:2px
}

:root{
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--line-200);
--shadow-1:0 1px 2px rgba(30,33,29,.05);
--shadow-2:0 2px 10px rgba(30,33,29,.06);
--shadow-3:0 12px 32px -12px rgba(30,33,29,.14);
--shadow-lift:0 18px 44px -20px rgba(1,74,56,.28);
--shadow-inset-hair:inset 0 -1px 0 var(--line-200);
--ring-focus:0 0 0 2px var(--paper-50),0 0 0 4px var(--emerald-300);
--scrim-image:linear-gradient(180deg,rgba(2,80,47,0) 38%,rgba(2,80,47,.62) 100%) /* @kind color */
}

:root{
--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-out-soft:cubic-bezier(.16,.84,.44,1); /* @kind other */
--ease-in-out-slow:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-1:120ms; /* @kind other */
--dur-2:200ms; /* @kind other */
--dur-3:320ms; /* @kind other */
--dur-4:560ms; /* @kind other */
--transition-base:all var(--dur-2) var(--ease-standard);
--transition-reveal:opacity var(--dur-4) var(--ease-out-soft),transform var(--dur-4) var(--ease-out-soft)
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-heading);font-family:var(--font-display);font-weight:var(--fw-light);letter-spacing:var(--ls-heading);line-height:var(--lh-heading)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-brand);text-decoration:none;border-bottom:1px solid var(--emerald-200);transition:color var(--dur-2) var(--ease-standard),border-color var(--dur-2) var(--ease-standard)}
a:hover{color:var(--emerald-600);border-bottom-color:var(--green-emerald)}
.eyebrow{font:var(--type-label);letter-spacing:var(--ls-latin-wide);text-transform:uppercase;color:var(--text-muted)}
::selection{background:var(--lime-200);color:var(--ink-900)}