/* =============================================================================
   MyMind — DESIGN TOKENS (anime minimal, tông sáng)
   NGUỒN SỰ THẬT DUY NHẤT cho màu / spacing / radius / font / duration.
   Mọi component tham chiếu qua var(). KHÔNG file nào khác được viết hex.
   Giá trị lấy nguyên từ đặc tả Phần V — không tự sinh giá trị mới.
   ========================================================================== */

:root {
  /* ---------- MÀU: nền & chữ ---------- */
  --bg-canvas:      #FBFAF7;  /* trắng ngà ấm, KHÔNG dùng #FFFFFF */
  --bg-surface:     #FFFFFF;  /* chỉ cho panel / menu nổi trên canvas */
  --bg-subtle:      #F2F0EB;  /* hover nền, vùng được chọn */
  --grid-dot:       #E3E0D8;  /* dot grid 24px, chấm 1.5px */

  --text-primary:   #2E2A28;  /* nâu-đen mềm, KHÔNG dùng #000000 */
  --text-secondary: #8A827C;
  --text-disabled:  #B8B2AB;

  --stroke:         #2E2A28;  /* viền node — dùng ở opacity .85 */
  --stroke-subtle:  #D8D3CC;  /* viền panel, đường chia */

  --accent:         #5B8DEF;  /* selection, focus ring, preview */
  --accent-soft:    #E8F0FE;  /* nền của vùng chọn */
  --danger:         #E57373;
  --success:        #7BB47F;

  /* ---------- PALETTE NODE: đúng 8 màu, không hơn không kém ---------- */
  --node-sakura-bg:    #FFD9DE;  --node-sakura-br:    #F0B3BC;
  --node-apricot-bg:   #FFE8C4;  --node-apricot-br:   #EFC98E;
  --node-cream-bg:     #FFF7C2;  --node-cream-br:     #E8D98A;
  --node-matcha-bg:    #D6F0D2;  --node-matcha-br:    #A8D4A2;
  --node-sora-bg:      #CCE9F2;  --node-sora-br:      #96CADB;
  --node-wisteria-bg:  #DCD6F7;  --node-wisteria-br:  #B3A8E8;
  --node-sand-bg:      #F5E6D8;  --node-sand-br:      #DBC3AB;
  --node-plain-bg:     #FFFFFF;  --node-plain-br:     #D8D3CC;

  /* Màu chữ trong node: bản đậm của 8 màu trên (lightness ~35%) + 2 màu text.
     Tính từ hue/sat của màu nền tương ứng, hạ lightness xuống 35%. */
  --nodetext-sakura:   #8C2B38;
  --nodetext-apricot:  #8A5A14;
  --nodetext-cream:    #7A6A10;
  --nodetext-matcha:   #2E6B28;
  --nodetext-sora:     #1F5C6E;
  --nodetext-wisteria: #443A8C;
  --nodetext-sand:     #6E5134;
  --nodetext-plain:    #5A5450;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --fs-node:        15px;   --lh-node: 1.45;  /* node mặc định */
  --fs-node-xs:     11px;   /* thang cỡ chữ node người dùng chọn được */
  --fs-node-s:      13px;
  --fs-node-m:      15px;
  --fs-node-l:      18px;
  --fs-node-xl:     22px;
  --fs-node-xxl:    28px;

  --fs-ui-label:    12px;   --ls-ui-label: 0.02em;  /* UI label, weight 500 */
  --fs-panel-title: 14px;                            /* tiêu đề panel, weight 600 */
  --fs-micro:       11px;                            /* micro text, màu secondary */

  /* ---------- HÌNH KHỐI ---------- */
  --r-node: 12px;
  --r-menu: 10px;
  --r-btn:   8px;
  --r-chip:  6px;
  --border-w: 1.5px;
  --r-badge: 6px;                /* nhãn góc node */
  --fs-badge: 11px;              /* chữ nhãn góc */
  --badge-text: #FBFAF7;         /* chữ trên nền badge đậm — trùng bg-canvas sáng */

  --shadow-rest:  0 1px 2px rgba(46, 42, 40, .06);
  --shadow-hover: 0 4px 12px rgba(46, 42, 40, .10);
  --shadow-menu:  0 8px 24px rgba(46, 42, 40, .14);
  --shadow-drag:  0 12px 32px rgba(46, 42, 40, .18);

  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---------- CHUYỂN ĐỘNG ----------
     Thao tác trực tiếp (kéo/pan/zoom/vẽ) = 0ms, bám con trỏ tuyệt đối.
     Chỉ hiệu ứng phụ mới có duration. */
  --d-fast:  120ms;  /* context menu, tooltip */
  --d-base:  140ms;  /* hover, focus, đổi màu */
  --d-enter: 160ms;  /* node mới xuất hiện */

  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);  /* CHỈ dùng cho node mới */

  /* ---------- HẰNG SỐ TƯƠNG TÁC (dùng chung JS/CSS, tránh trùng lặp) ---------- */
  --grid-size:      24px;  /* bước dot grid */
  --snap-grid:       8px;  /* snap lưới */
  --snap-align:      6px;  /* ngưỡng snap canh lề */
  --drag-threshold:  4px;  /* dịch quá mức này mới coi là kéo */
  --anchor-radius:  80px;  /* khoảng cách hiện điểm neo khi kéo tới gần */
  --node-min-w:    120px;
  --node-max-w:    320px;
  --hit-stroke:     12px;  /* bề rộng vùng click của đường nối */
  --droplink-opacity: .55;  /* độ mờ đường nối đề nghị khi kéo-thả nối nhanh */
  --droplink-gap:   64px;  /* khoảng HỞ tối đa giữa 2 hộp để đề nghị nối nhanh */

  /* Kéo đổi kích thước (resize). Giới hạn nhỏ hơn --node-min-w vì min-w là cỡ
     MẶC ĐỊNH khi tạo node, còn đây là mức người dùng được phép bóp nhỏ tới. */
  --node-resize-min-w: 72px;
  --node-resize-min-h: 36px;
  --img-resize-min:    48px;  /* cạnh nhỏ nhất của ảnh trong node */
  --rz-handle:          11px;  /* cỡ tay cầm resize ở 4 góc node */

  /* ---------- NHÓM (khung bao quanh nhiều node) ---------- */
  --group-pad:      28px;  /* lề từ mép node ngoài cùng tới viền nhóm */
  --group-title-h:  26px;  /* chỗ dành cho tên nhóm ở mép trên */
  --group-min-w:   120px;
  --group-min-h:    80px;
  --group-bg-alpha:  .16;  /* độ đậm nền nhóm pha từ màu palette */

  /* Ngoặc nhọn nối nhóm -> node đích */
  --brace-depth:    26px;  /* độ nhô của mũi ngoặc ra khỏi mép nhóm */
  --brace-stroke:    2px;
}

/* Tắt mọi chuyển động khi người dùng yêu cầu — giữ nguyên đổi màu */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast:  0ms;
    --d-base:  0ms;
    --d-enter: 0ms;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, fill, stroke !important;
  }
}