/* Token: primitive Figma + semantic (bộ cũ ở :root) */

/* ============ tokens — Discord-derived, light ============ */
/* The source system is indigo-only; this is a light reading of it: the indigo
   canvas becomes the ink, the Blurple→magenta mesh stays but drops to a wash. */
:root{
  --color-background-primary:#ffffff;    /* nền trang */
  --color-background-secondary:#f0f3f7; /* nền riêng của khung chứa tin nhắn */
  --color-surface-primary:#ffffff;
  --color-surface-secondary:#eceef8;

  --color-text-primary:#0a0d3a;
  --color-text-secondary:#464c7a;
  --color-text-tertiary:#5c6394;
  --color-border-default:rgba(10,13,58,.12);
  --color-separator:rgba(10,13,58,.07);
  --color-border-subtle:#e5e5ea;   /* Figma color/border/subtle */
  --color-separator-non-opaque:rgba(0,0,0,.12);   /* Figma separators/non-opaque — MỌI divider dùng màu này */

  --color-fill-quaternary:rgba(10,13,58,.05);
  --color-fill-tertiary:rgba(10,13,58,.09);
  --color-fill-secondary:rgba(10,13,58,.15);
  --color-fill-primary:rgba(10,13,58,.22);

  --color-accent-primary:#5865f2;          /* Blurple — owns active + focus */
  --color-status-success:#35ed7e;            /* reserved: the one high-intent action */
  --color-on-success:#000000;
  --color-system-pink:#ec48bd;
  --color-border-focus:#5865f2;

  --color-status-error:#ec48bd;
  --color-status-error-ink:#c2208f;       /* magenta is too light to be text on white */
  --color-solo:#0a0d3a;             /* the "riêng" mode — one colour for the concept */
  --color-on-solo:#ffffff;
  --color-on-error:#000000;
  --color-overlay-scrim:rgba(10,13,58,.42);
  --elevation-floating:0 6px 44px -14px rgba(69,42,124,.45);
  --elevation-hairline:0 .5px 1px rgba(0,0,0,.08);   /* Figma Elevation/Hairline */
  --elevation-dropdown:0 8px 24px rgba(17,23,68,.11); /* Figma Dropdown menu */

  /* màu danh mục (chỉ dùng ở thống kê) — chốt 2026-10-08, theo bảng primitive Figma */
  --color-category-food:#ff9500;       /* orange/500 */
  --color-category-move:#007aff;       /* blue/500 */
  --color-category-ticket:#af52de;     /* purple/500 */
  --color-category-shop:#ff2d55;       /* pink/500 */
  --color-category-home:#34c759;       /* green/500 */
  --color-category-other:#8e8e93;      /* gray/500 */
  --color-category-recurring:#ffcc00;  /* yellow/500 */
  --color-on-category:#ffffff;
  --color-on-accent:#ffffff;       /* Figma color/on-accent */

  --radius-6:6px; --radius-8:8px; --radius-10:10px; --radius-12:12px; --radius-14:14px; --radius-16:16px; --radius-24:24px; --radius-40:40px; --radius-pill:50px;
  /* Figma size/control/button-* */
  --size-control-button-large:52px; --size-control-button-medium:44px; --size-control-button-small:32px;
  --spacing-2:2px; --spacing-4:4px; --spacing-6:6px; --spacing-8:8px; --spacing-10:10px; --spacing-12:12px; --spacing-16:16px; --spacing-20:20px; --spacing-24:24px; --spacing-32:32px; --spacing-40:40px; --spacing-48:48px; --spacing-96:96px;
  --page-w:600px;   /* bề ngang tối đa của MỌI trang trong dự án */

  --r-slip:var(--radius-16);
  /* Figma text styles (docs/design.md A.5) — dùng: font:var(--text-x); letter-spacing:var(--tracking-x) */
  --font-sans:"Google Sans Flex",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --text-large-title:700 34px/41px var(--font-sans); --tracking-large-title:-.4px;
  --text-title-1:700 28px/34px var(--font-sans); --tracking-title-1:-.3px;
  --text-title-2:700 22px/28px var(--font-sans); --tracking-title-2:-.2px;
  --text-title-3:600 20px/25px var(--font-sans); --tracking-title-3:-.1px;
  --text-body-xl:400 19px/26px var(--font-sans); --tracking-body-xl:-.15px;
  --text-body-xl-emphasis:600 19px/26px var(--font-sans); --tracking-body-xl-emphasis:-.15px;
  --text-body-large:400 18px/24px var(--font-sans); --tracking-body-large:-.1px;
  --text-body-large-emphasis:600 18px/24px var(--font-sans); --tracking-body-large-emphasis:-.1px;
  --text-body:400 17px/22px var(--font-sans); --tracking-body:-.1px;
  --text-body-medium:500 17px/22px var(--font-sans); --tracking-body-medium:-.1px;
  --text-body-emphasis:600 17px/22px var(--font-sans); --tracking-body-emphasis:-.1px;
  --text-body-small:400 15px/20px var(--font-sans); --tracking-body-small:0;
  --text-body-small-emphasis:600 15px/20px var(--font-sans); --tracking-body-small-emphasis:0;
  --text-compact:400 13px/18px var(--font-sans); --tracking-compact:0;
  --text-compact-emphasis:600 13px/18px var(--font-sans); --tracking-compact-emphasis:0;
  --text-navigation-title:600 17px/22px var(--font-sans); --tracking-navigation-title:-.1px;
  --text-headline:600 17px/22px var(--font-sans); --tracking-headline:-.1px;
  --text-callout:400 16px/21px var(--font-sans); --tracking-callout:-.05px;
  --text-subheadline:400 15px/20px var(--font-sans); --tracking-subheadline:0;
  --text-footnote:400 13px/18px var(--font-sans); --tracking-footnote:0;
  --text-caption:400 12px/16px var(--font-sans); --tracking-caption:.05px;
  --text-caption-2:400 11px/13px var(--font-sans); --tracking-caption-2:.06px;
  --text-button:600 17px/22px var(--font-sans); --tracking-button:-.1px;
  --text-button-small:600 15px/20px var(--font-sans); --tracking-button-small:0;
  --text-tab-label:500 10px/12px var(--font-sans); --tracking-tab-label:.1px;
  --text-input:400 17px/22px var(--font-sans); --tracking-input:-.1px;
  --text-numeric:500 17px/22px var(--font-sans); --tracking-numeric:0;
  --text-all-cap:600 14px/21px var(--font-sans); --tracking-all-cap:0;

  /* Figma primitives (iOS Lean / Primitives) — chỉ để dựng semantic token */
  --neutral-0:#ffffff;
  --neutral-100:#f2f2f7;
  --neutral-50:#f9f9fb;
  --neutral-200:#e5e5ea;
  --neutral-300:#d1d1d6;
  --neutral-400:#aeaeb2;   /* Figma color/text/disabled */
  --neutral-500:#8e8e93;
  --neutral-600:#636366;
  --neutral-1000:#000000;
  --green-100:#ddf7e4;
  --green-200:#bcefc9;   /* Figma green/200 — máy tính quy đổi */
  --yellow-50:#fffceb;
  --yellow-100:#fff6c7;
  --green-500:#34c759;   /* Figma color/status/success */
  --orange-500:#ff9500;  /* Figma color/status/warning */
  --orange-100:#ffebd5;  /* Figma color/status/warning-surface */
  --blue-100:#dceeff;
  --blue-400:#56adff;   /* Figma blue/400 — nút trên toast */
  --blue-500:#007aff;
  --red-100:#ffe0de;
  --red-500:#ff3b30;
}