/* ============================================================================
   Tasktifly 品牌配色（2026-09 由舊品牌嘅鴨黃改過嚟）

   ⚠️⚠️ 由黃轉紅唔係換個色值咁簡單，讀落去先改 ⚠️⚠️

   鴨黃 #FFD400 配黑字有 14.67:1，好鬆動。紅色係中亮度，冇一隻紅可以同時
   配黑字同白字都過 WCAG AA 4.5:1：

       #F5233B  黑字 5.19 ✅   白字 4.05 ❌
       #E4002B  黑字 4.33 ❌   白字 4.85 ✅   ← 揀咗呢隻
       #C41230  黑字 3.48 ❌   白字 6.04 ✅

   所以 --action-primary-fg 由黑字改成白字。#E4002B 揀嚟因為佢同時滿足兩邊：
     · 白字喺紅底           4.85:1 ✅（掣、chip、券號）
     · 紅字／紅邊喺白底     4.85:1 ✅（連結、focus、邊框）
   再鮮少少（例如 #EC1B3C）白字就跌到 4.39，唔夠。要改嘅話見下面 --brand。

   ---- 更重要：紅色喺呢個產品度本來已經有意思 ----
   --down（#D63332）一直做緊「錯誤／危險／蝕」：錯誤訊息、pill--bad、
   .c-btn--danger（刪除）、表單驗證失敗邊框。品牌變紅之後，如果唔動佢，
   「主要行動」同「破壞性行動」會同色 —— 喺獎賞發放頁「標記已付」係派真錢，
   分唔開就會撳錯。所以：
     · --down 加深加沉（#B3121F），同鮮紅品牌色一眼分得開
     · 「成功／正常」訊號全部由 accent 搬去 --up 綠色
       （pill--good、c-flash 本來借咗鴨黃嚟做，紅色底下會讀成「出事」）
   ========================================================================= */
:root{
/* ---- Brand ----
   ⚠️ 改品牌紅淨係改呢一行 --brand（同埋 assets/logo-tasktifly.svg 入面
      嗰三個 #E4002B —— SVG 經 <img> 載入攞唔到 CSS 變數）。
      揀第二隻紅之前，用 scratchpad 嗰個對比度計數機驗返白字有冇 4.5:1。 */
--brand:#E4002B;             /* Tasktifly 紅 · 主 accent（配白字 4.85:1） */
--brand-press:#C10024;       /* 撳落去（配白字 6.13:1） */
--brand-soft:#FF8095;
--brand-wash:#FFF0F2;        /* 淡紅底，用喺提示 block */

/* Token 名照舊叫 --rh-green-*，冇改名 —— 純粹係歷史包袱（Robinhood 石灰綠
   → 鴨黃 → Tasktifly 紅），全部 CSS 都引用緊呢個名。當佢係「主 accent」
   嘅代號，唔好當佢真係綠色。值一律指向上面嘅 --brand。 */
--rh-green:var(--brand);
--rh-green-press:var(--brand-press);
--rh-green-soft:var(--brand-soft);
--rh-green-wash:var(--brand-wash);
--rh-black:#000000;
--rh-white:#FFFFFF;

/* ---- 次要／資訊藍 ----
   本來係舊 logo 嘅主色。Tasktifly logo 冇藍，但呢隻藍仲用緊做
   「資訊態」（--info），同紅色品牌色分得開，所以保留。 */
--td-blue:#2060F0;
--td-blue-press:#1A52D0;
--td-blue-soft:#8FB4FF;
--td-blue-wash:#E8F0FE;

/* ---- Neutral ramp (light) ---- */
--neutral-0:#FFFFFF;
--neutral-25:#FAFAFA;
--neutral-50:#F4F4F4;
--neutral-100:#EBEBEB;
--neutral-200:#DCDCDC;
--neutral-300:#C4C4C4;
--neutral-400:#A5A6A7;
--neutral-500:#7A7D80;
--neutral-600:#5A5D60;
--neutral-700:#3A3D40;
--neutral-800:#1E2124;
--neutral-900:#121417;
--neutral-950:#000000;

/* ---- Dark-surface ramp (product / dark marketing) ---- */
--dark-bg:#000000;
--dark-surface:#1E2124;
--dark-surface-2:#26292C;
--dark-border:#35383A;
--dark-text:#FFFFFF;
--dark-text-muted:#919FA6;
--dark-text-dim:#839096;

/* ---- Semantic market colors ---- */
--up:#2E7D32;                /* 成功／正常。加深咗，白底上有 5.13:1 讀得到字 */
--up-wash:#E8F5E9;           /* 成功 block 底色（原本借鴨黃，紅色底下唔用得） */
/* 危險紅加深加沉，同品牌鮮紅 #E4002B 一眼分得開。
   兩者都係紅，但一個係「撳我」一個係「小心」，喺派錢頁面呢個分別好緊要。 */
--down:#B3121F;
--info:var(--td-blue);       /* 資訊態用藍 */
--info-soft:var(--td-blue-soft);
--warn:#D26E00;
--cool-blue:#A9B7D0;   /* editorial photography backdrop */

/* ---- Semantic aliases: light surface ---- */
--text-primary:var(--neutral-950);
--text-secondary:var(--neutral-600);
--text-muted:var(--neutral-500);
--text-inverse:var(--neutral-0);
--text-link:var(--neutral-950);
--surface-page:var(--neutral-0);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-50);
--surface-accent:var(--rh-green);
--surface-inverse:var(--rh-black);
--border-subtle:var(--neutral-100);
--border-default:var(--neutral-200);
--border-strong:var(--neutral-950);

/* ---- Semantic aliases: interactive ---- */
--action-primary-bg:var(--rh-green);
/* 鴨黃年代呢度係黑字（14.67:1）。紅色配黑字得 4.33:1，唔夠 AA，所以轉白字。
   任何「accent 底」嘅嘢都要用呢個 token 或者 --text-on-accent，唔好再
   直接寫 var(--rh-black) —— 寫死咗就繞過咗呢個決定。 */
--action-primary-fg:var(--rh-white);
--action-primary-bg-press:var(--rh-green-press);
--text-on-accent:var(--rh-white);
/* inverse 維持黑底白字。試過改成品牌藍，但 v4 入面 inverse 用喺
   「性別／收款方式已揀」嘅 chip，一屏會同時出好多粒；而「去登入」嗰粒
   仲要疊喺黃色完成卡上面，藍疊黃好刺眼。要換就改下面一行。 */
--action-inverse-bg:var(--rh-black);
--action-inverse-fg:var(--rh-white);
--action-outline-border:var(--neutral-950);
--focus-ring:var(--rh-black);
}

/* Dark scope: apply .rh-dark to any subtree that sits on black */
.rh-dark{
--text-primary:var(--dark-text);
--text-secondary:var(--dark-text-muted);
--text-muted:var(--dark-text-dim);
--text-inverse:var(--neutral-950);
/* 黑底上面唔用品牌紅做連結：#E4002B 喺黑底得 4.33:1，唔夠。用淡紅。 */
--text-link:var(--brand-soft);
--surface-page:var(--dark-bg);
--surface-card:var(--dark-surface);
--surface-sunken:var(--dark-surface-2);
--border-subtle:var(--dark-border);
--border-default:var(--dark-border);
--border-strong:var(--dark-text-muted);
--action-inverse-bg:var(--rh-white);
--action-inverse-fg:var(--rh-black);
--action-outline-border:var(--dark-border);
--focus-ring:var(--brand-soft);
}