/* ==========================================================================
   Memoto — design_new2 · TOKEN
   --------------------------------------------------------------------------
   Bảng này KHÔNG lấy từ docs/BRAND_AND_DESIGN.md. Dựng lại từ giấy trắng.
   Nguyên tắc chọn màu duy nhất, và là nguyên tắc quan trọng nhất của file:
   màu thương hiệu phải nằm XA HẲN ba màu trạng thái (xanh lá / hổ phách /
   đỏ). Vì vậy chọn indigo. Nếu sau này ai muốn đổi brand sang teal hay
   xanh lá, hãy đọc lại dòng này trước: "còn nhiều" sẽ lẫn với "nút bấm".

   Ba trạng thái theme, đúng thứ tự đè:
     1. :root                                  → sáng, ĐẦY ĐỦ
     2. @media (prefers-color-scheme: dark)     → chỉ đè token, có :not([data-theme="light"])
     3. :root[data-theme="dark"]                → nút bấm tay thắng cả hệ thống
   Không bao giờ khai báo màu của một component bên trong media query.
   ========================================================================== */

:root {
  /* --- Nền & bề mặt (xám lệch xanh, cùng hệ với brand — không xám thuần) --- */
  --bg:      #F4F5F9;
  --sf:      #FFFFFF;
  --sf2:     #ECEEF6;
  --sf3:     #E2E5F0;
  --line:    #DCE0EC;
  --line-2:  #C7CCDD;

  /* --- Chữ --- */
  --ink:     #11131C;
  --ink-2:   #575D73;
  --ink-3:   #8A90A6;

  /* --- Thương hiệu --- */
  --br:      #4340E6;
  --br-d:    #2E2BB8;
  --br-s:    #E9E8FF;
  --br-i:    #3A37C9;   /* chữ brand đọc được trên --br-s */
  --on-br:   #FFFFFF;

  /* --- Trạng thái ---
     Ba biến mỗi trạng thái, và đừng gộp chúng lại:
       --x    chữ, phải đủ tương phản trên --x-s  → buộc phải sẫm ở theme sáng
       --x-s  nền mềm sau chữ / sau icon
       --x-f  MẢNG TÔ (thanh đo, chấm đèn) → phải tươi, không sẫm
     Gộp --x với --x-f là lỗi đã mắc một lần: hổ phách sẫm #96620A đọc tốt khi
     làm chữ, nhưng tô lên thanh đo thì ra màu nâu bùn. */
  --ok:      #12855C;
  --ok-s:    #DCF3E9;
  --ok-f:    #17A86F;
  --soon:    #96620A;
  --soon-s:  #FCEED4;
  --soon-f:  #E8A317;
  --late:    #C93434;
  --late-s:  #FCE3E3;
  --late-f:  #E14343;
  --none:    #7B8195;
  --none-s:  #E8EAF1;
  --none-f:  #A8AEC0;

  /* --- Hình học --- */
  --r-s:     10px;
  --r-m:     14px;
  --r-l:     18px;
  --r-xl:    24px;
  --r-sheet: 26px;
  --r-phone: 46px;
  --pill:    999px;

  /* --- Độ nổi: rất tiết chế, 2 mức, không dùng mức thứ 3 --- */
  --sh-1:    0 1px 2px rgba(17, 19, 28, .05), 0 4px 14px rgba(17, 19, 28, .05);
  --sh-2:    0 2px 6px rgba(17, 19, 28, .07), 0 18px 40px rgba(17, 19, 28, .10);
  --hl:      inset 0 1px 0 rgba(255, 255, 255, .7);

  /* --- Chữ --- */
  --f-ui:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dis:   "Barlow Condensed", "Archivo", system-ui, sans-serif;
  --f-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Chuyển động --- */
  --ease:    cubic-bezier(.2, .8, .2, 1);
  --t-fast:  120ms;
  --t-base:  200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #0A0C12;
    --sf:      #12151E;
    --sf2:     #1A1E2A;
    --sf3:     #232838;
    --line:    #242938;
    --line-2:  #333A4D;

    --ink:     #F1F3FA;
    --ink-2:   #A0A7BD;
    --ink-3:   #6C7490;

    --br:      #6F6BFF;
    --br-d:    #4A46E8;
    --br-s:    #221F60;
    --br-i:    #B9B6FF;
    --on-br:   #0A0C12;

    /* Theme tối: chữ đã tươi sẵn nên chữ và mảng tô gần như trùng nhau. */
    --ok:      #3ED598;
    --ok-s:    #0E3A2B;
    --ok-f:    #3ED598;
    --soon:    #FFC24D;
    --soon-s:  #3D2C05;
    --soon-f:  #FFC24D;
    --late:    #FF7B7B;
    --late-s:  #451414;
    --late-f:  #F96A6A;
    --none:    #7E86A0;
    --none-s:  #1E2330;
    --none-f:  #4B536B;

    --sh-1:    0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .40);
    --sh-2:    0 2px 8px rgba(0, 0, 0, .55), 0 22px 50px rgba(0, 0, 0, .55);
    --hl:      inset 0 1px 0 rgba(255, 255, 255, .05);
  }
}

:root[data-theme="dark"] {
  --bg:      #0A0C12;
  --sf:      #12151E;
  --sf2:     #1A1E2A;
  --sf3:     #232838;
  --line:    #242938;
  --line-2:  #333A4D;

  --ink:     #F1F3FA;
  --ink-2:   #A0A7BD;
  --ink-3:   #6C7490;

  --br:      #6F6BFF;
  --br-d:    #4A46E8;
  --br-s:    #221F60;
  --br-i:    #B9B6FF;
  --on-br:   #0A0C12;

  /* Theme tối: chữ đã tươi sẵn nên chữ và mảng tô gần như trùng nhau. */
  --ok:      #3ED598;
  --ok-s:    #0E3A2B;
  --ok-f:    #3ED598;
  --soon:    #FFC24D;
  --soon-s:  #3D2C05;
  --soon-f:  #FFC24D;
  --late:    #FF7B7B;
  --late-s:  #451414;
  --late-f:  #F96A6A;
  --none:    #7E86A0;
  --none-s:  #1E2330;
  --none-f:  #4B536B;

  --sh-1:    0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .40);
  --sh-2:    0 2px 8px rgba(0, 0, 0, .55), 0 22px 50px rgba(0, 0, 0, .55);
  --hl:      inset 0 1px 0 rgba(255, 255, 255, .05);
}