/* Homie design tokens - "Warm kitchen notebook" with Homie red as the main colour.
     Colours updated to the owner's brand guideline of 25 Oct 2569 (red, cream, brown, green). Butter,
     member avatars, member tints, moods and danger kept exactly as before.
     Source of truth: design-proposal/new-look/system/tokens.css (owner's choice, 2026-09-14).
     New work uses the --hm-* names. The older names below (--accent, --text, --surface2 …) are
     kept as aliases of the new palette so every page that still uses them picks up the new look. */

  :root {
    /* ---- main colour: Homie red ---- */
    --hm-red:#CA1E26;          /* buttons, active tab, links. White text on it 5.6:1 */
    --hm-red-press:#A8171E;    /* pressed / hover */
    --hm-red-ink:#7E1418;      /* red text on soft red backgrounds */
    --hm-red-bright:#E52440;   /* unread dot, focus ring, progress fill on white. Never for text under 15px */
    --hm-red-soft:#F5DDD2;     /* selected chip, count badge, soft button */
    --hm-red-tint:#FCEFE9;     /* very light wash, hover rows */

    /* ---- danger: scarlet leaning orange, always with an icon, outlined or soft ----
       Filled only inside an "are you sure" dialog. Never the main red. */
    --hm-danger:#B8321C;
    --hm-danger-press:#95260F;
    --hm-danger-soft:#FDECE6;
    --hm-danger-line:#F1B6A6;

    /* ---- paper & ink ---- */
    --hm-paper:#FDF8EE;        /* page background (cream) */
    --hm-card:#FFFFFF;
    --hm-sunken:#F7EDDD;       /* inactive segmented control, quiet fills */
    --hm-line:#EBDDC8;         /* dividers, card lift */
    --hm-line-strong:#E2CDB2;  /* input borders, dashed add row */
    --hm-ink:#3B2F27;          /* main text */
    --hm-ink-2:#7A6658;        /* secondary text */
    --hm-ink-3:#A69485;        /* placeholder, disabled only - not for information */
    --hm-backdrop:rgba(59,47,39,.42);

    /* ---- supporting colours from the notebook ---- */
    --hm-butter:#F7DFA3;  --hm-butter-soft:#FDF3DA;  --hm-butter-ink:#6B5320;  --hm-butter-deep:#B7851B;
    --hm-sage:#9DBE9A;    --hm-sage-soft:#E6F0E2;    --hm-sage-ink:#3F5E3C;    --hm-sage-deep:#4F7A4B;
    --hm-blush:#F3CFC3;   --hm-blush-soft:#FBEBE5;   --hm-blush-ink:#7C4E40;

    /* ---- status ---- */
    --hm-success:var(--hm-sage-deep);  --hm-success-soft:var(--hm-sage-soft);  --hm-success-ink:var(--hm-sage-ink);
    --hm-pending:var(--hm-butter-deep);--hm-pending-soft:var(--hm-butter-soft);--hm-pending-ink:var(--hm-butter-ink);

    /* ---- member avatars ---- */
    --hm-avatar-1:#CA1E26; /* owner order 26 Oct 2569, 3.4: the brand red of 25 Oct */ --hm-avatar-2:#4A6FC4; --hm-avatar-3:#4F7A4B; --hm-avatar-4:#8E6412; --hm-avatar-5:#7D4E93; --hm-avatar-6:#B8540F; /* burnt orange, kept apart from the Angry mood orange */

    /* ---- member colour tints: soft bg + ink text per MEMBER_COLORS key (config.js), fixed values that
       do NOT follow the brand palette (red and green kept at their pre-25-Oct values), same shape
       as --hm-blush/--hm-blush-soft/--hm-blush-ink. --hm-avatar-1..6 are too dark to read text on
       (avatar circles only) - cards that follow a member's own colour use these instead. ---- */
    --hm-member-red-soft:    #F7E3DF;               --hm-member-red-ink:    #6E1311;
    --hm-member-blue-soft:   #E8EDFB;               --hm-member-blue-ink:   #2E4A85;
    --hm-member-green-soft:  #E6F0E2;               --hm-member-green-ink:  #3F5E3C;
    --hm-member-amber-soft:  #F7EBD3;               --hm-member-amber-ink:  #5C4310;
    --hm-member-purple-soft: #F1E6F6;               --hm-member-purple-ink: #55366A;
    --hm-member-orange-soft: #FBE7D6;               --hm-member-orange-ink: #7A3A0A;

    /* ---- type: DM Sans (English, numbers) + Noto Sans Thai (Thai) - both loopless ----
       Thai rule: line-height never below 1.4 on anything that can hold Thai. A single line that
       truncates also gets padding-block:.2em + margin-block:-.2em (see .hm-truncate in base.css). */
    --hm-font:'DM Sans','Noto Sans Thai',system-ui,sans-serif;
    --hm-fs-display:30px; --hm-lh-display:1.4;
    --hm-fs-title:24px;   --hm-lh-title:1.45;
    --hm-fs-heading:18px; --hm-lh-heading:1.45;
    --hm-fs-body:16px;    --hm-lh-body:1.5;
    --hm-fs-small:14px;   --hm-lh-small:1.45;
    --hm-fs-micro:12px;   --hm-lh-micro:1.4;
    --hm-w-regular:400; --hm-w-medium:500; --hm-w-semibold:600; --hm-w-bold:700;

    /* ---- mood colours: the original Homie mood page, kept exactly. Moods only. ---- */
    --hm-mood-happy:#FFB6D5; --hm-mood-calm:#A48BD9; --hm-mood-sad:#3FB7F2; --hm-mood-angry:#F26B1F; --hm-mood-tired:#FFB52E;
    --hm-mood-empty:#F8ECEA;

    /* ---- spacing (4px grid) ---- */
    --hm-s-1:4px; --hm-s-2:8px; --hm-s-3:12px; --hm-s-4:16px; --hm-s-5:20px; --hm-s-6:24px; --hm-s-8:32px;
    --hm-gutter:20px;
    --hm-tap:44px;

    /* ---- shape ---- */
    --hm-r-sm:12px; --hm-r-md:18px; --hm-r-lg:26px; --hm-r-pill:999px;

    /* ---- depth: paper lift, not glow ---- */
    --hm-lift:0 2px 0 var(--hm-line);
    --hm-pop:0 18px 40px -10px rgba(60,40,20,.30);
    --hm-sheet:0 -12px 40px -12px rgba(60,40,20,.28);

    /* ---- motion ---- */
    --hm-fast:150ms; --hm-base:250ms; --hm-ease:cubic-bezier(.2,.8,.2,1);

    /* ===== older names, now pointing at the new palette ===== */
    --bg: var(--hm-paper);
    --surface: var(--hm-card);
    --surface2: var(--hm-sunken);
    --border: var(--hm-line);
    --text: var(--hm-ink);
    --text2: var(--hm-ink-2);
    --text3: var(--hm-ink-3);
    /* ---- accent: the signed-in user's own "My colour", set at runtime by js/core/theme-accent.js.
       Everything below is a fixed fallback (the brand red) until that script applies the real one.
       Fixed meanings (errors, "not neutered", moods, other members' own colours) deliberately keep
       reading var(--hm-*) directly instead of var(--accent*), so they never follow this override. ---- */
    --accent: var(--hm-red);
    --accent-soft: var(--hm-red-soft);
    --accent-tint: var(--hm-red-tint);
    --accent-dark: var(--hm-red-press);
    --accent-ink: var(--hm-red-ink);
    --accent-bright: var(--hm-red-bright);
    --accent-rgb: 202,30,38;
    --accent-grad-mid: #D4474D;  /* not in the owner's 25 Oct table: theme-accent.js's middle shade for #CA1E26 (18% toward white) */
    --accent-grad-deep: var(--hm-red-ink);
    --accent-on: #fff;
    --purple: var(--hm-red);
    --purple-light: var(--hm-red-tint);
    --green: var(--hm-sage-deep);
    --green-light: var(--hm-sage-soft);
    --teal: var(--hm-sage-deep);
    --teal-light: var(--hm-sage-soft);
    --blue: var(--hm-avatar-2);
    --blue-light: #EAF0FA;
    --pink: var(--hm-blush-ink);
    --pink-light: var(--hm-blush-soft);
    --orange: var(--hm-butter-deep);
    --orange-light: var(--hm-butter-soft);
    --yellow: var(--hm-butter-deep);
    --yellow-light: var(--hm-butter-soft);
    --red: var(--hm-danger);
    --red-light: var(--hm-danger-soft);
    --radius: var(--hm-r-lg);
    --radius-sm: var(--hm-r-md);
    --radius-pill: var(--hm-r-pill);
    --shadow: var(--hm-lift);
    --shadow-lg: var(--hm-pop);
  }