/* ============================================================================
   TalkDuck 品牌配色（由 Robinhood 石灰綠改過嚟）

   色值來源：assets/logo-talkduck-128.png 逐 pixel 抽出 —— 藍 61.9%、黃 20.5%、白 15.2%。

   點解黃色做主 accent 而唔係佔比更大嘅藍：
     鴨黃  #FFD400  配黑字 14.67:1  ✅
     品牌藍 #2060F0  配黑字  3.99:1  ❌ 未夠 WCAG AA 4.5:1
   成套設計系統嘅骨幹係「鮮色底 + 黑字」（--action-primary-fg 本身就係黑）。
   黃色可以原位頂替，結構一行都唔使改；藍色做主 CTA 就要反轉成白字，
   會連帶推翻「accent 底永遠配黑字」同綠色 hero block 嘅寫法。
   所以：黃 = 主 accent（隻鴨），藍 = 次要／資訊（logo 本身已經帶住）。

   ⚠️ Token 名照舊叫 --rh-green-*，冇改名。
      因為 _ds_bundle.js 內部引用咗 --rh-green 10 次，改名會令 DS 組件即刻失效。
      改嘅只係「值」，所以全部組件同 inline style 自動跟住轉色。
      當佢係「主 accent」嘅代號，唔好當佢真係綠色。
   ========================================================================= */
:root{
/* ---- Brand ---- */
--rh-green:#FFD400;          /* 鴨黃 · 主 accent（配黑字 14.67:1） */
--rh-green-press:#E8BF00;    /* 撳落去（配黑字 11.9:1） */
--rh-green-soft:#FFE87A;
--rh-green-wash:#FFF8D6;     /* 提示 block 底色 */
--rh-black:#000000;
--rh-white:#FFFFFF;

/* ---- TalkDuck 品牌藍（logo 主色）----
   唔做主 CTA（配黑字唔夠對比）。角色：資訊態、次要強調。
   要用就一定配白字（5.26:1）。 */
--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:#41B243;
--down:#D63332;
--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);
--action-primary-fg:var(--rh-black);
--action-primary-bg-press:var(--rh-green-press);
/* 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);
--text-link:var(--rh-green);
--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(--rh-green);
}