@layer tokens {
  :root {
    --sm-brand-dark: #073B31;
    --sm-brand-green: #128A3A;
    --sm-brand-mint: #BFEFD8;
    --sm-brand-mint-soft: #EAFBF1;
    --sm-brand-lime: #B9F529;
    --sm-brand-pink: #FF7FA3;

    --sm-bg-app: #F5F7F6;
    --sm-bg-card: #FFFFFF;

    --sm-text-primary: #111817;
    --sm-text-secondary: #6F7A7D;

    --sm-border-soft: #E7ECEA;

    --sm-danger: #D94335;
    --sm-danger-soft: #FFF1EF;

    --sm-radius-card: 24px;
    --sm-radius-hero: 26px;
    --sm-radius-button: 18px;
    --sm-radius-input: 18px;
    --sm-radius-pill: 999px;
    --sm-radius-sheet: 28px 28px 0 0;

    --sm-shadow-card: 0 12px 32px rgba(7, 59, 49, 0.08);
    --sm-shadow-soft: 0 8px 24px rgba(7, 59, 49, 0.06);
    --sm-shadow-bottom: 0 -14px 32px rgba(7, 59, 49, 0.08);

    --sm-font: "Google Sans Thai", sans-serif;
    --sm-type-h1: clamp(28px, 5.2vw, 32px);
    --sm-type-h2: clamp(22px, 4.4vw, 24px);
    --sm-type-card-title: clamp(19px, 4vw, 22px);
    --sm-type-body: 16px;
    --sm-type-meta: 14px;
    --sm-type-button: 17px;
  }
}