/* ============================================================
   Klook Workbench 2B · Color Tokens
   Source: references/06-tokens.md + brandTheme (Ant Design v6)
   All hand-confirmed against Figma. Business UI must use the
   SEMANTIC aliases; the raw palette is for charts / brand only.
   ============================================================ */

:root {
  /* ---- Brand palette (raw) ---------------------------------- */
  --klk-orange: #FF5B00;          /* Logo / brand materials ONLY — never business UI */
  --klk-purple: #6056D6;          /* Design materials ONLY — never business components */
  --klk-teal:   #00CBD1;          /* Brand mark accent */
  --klk-yellow: #FFC200;          /* Brand mark accent */

  /* ---- Primary / interaction (Ant Blue scale) --------------- */
  --klk-blue-1: #E6F4FF;          /* selected row / lightest fill */
  --klk-blue-2: #BAE0FF;          /* selected + hover row */
  --klk-blue-5: #4096FF;          /* hover (lighter) */
  --klk-blue-6: #1677FF;          /* primary (rest) */
  --klk-blue-7: #0958D9;          /* active (darker) */
  --klk-color-primary: var(--klk-blue-6);
  --klk-color-link:    var(--klk-blue-6);

  /* ---- Text (4 layers · Ant defaults, not overridden) ------- */
  --klk-text:            rgba(0, 0, 0, 0.88);   /* titles, table content, labels */
  --klk-text-secondary:  rgba(0, 0, 0, 0.65);   /* descriptions, subtitles */
  --klk-text-tertiary:   rgba(0, 0, 0, 0.45);   /* placeholder, meta */
  --klk-text-quaternary: rgba(0, 0, 0, 0.25);   /* disabled, group labels */
  --klk-text-heading:    #1F1F1F;               /* page titles / stat values */

  /* ---- Background ------------------------------------------- */
  --klk-bg-container: #FFFFFF;    /* cards, table, inputs */
  --klk-bg-layout:    #F5F5F5;    /* page canvas */
  --klk-bg-elevated:  #FFFFFF;    /* modal, drawer, dropdown */
  --klk-bg-sidebar:   #FBFBFB;    /* sidebar background */
  --klk-fill-tertiary: #F5F5F5;   /* general fill */
  --klk-fill-content: rgba(0, 0, 0, 0.06);  /* search field background */
  --klk-bg-header-search: #E9EEF6;          /* header search pill (demo value) */
  --klk-bg-header-search-hover: #DBE2EE;

  /* ---- Border ----------------------------------------------- */
  --klk-border:           #D9D9D9;   /* control borders */
  --klk-border-secondary: #EEEFF1;   /* dividers, header underline */
  --klk-border-table:     #F0F0F0;   /* table inner lines */

  /* ---- Functional / semantic colors ------------------------- */
  --klk-success: #52C41A;
  --klk-warning: #FAAD14;
  --klk-error:   #FF4D4F;
  --klk-info:    #1677FF;

  /* ---- Interaction states ----------------------------------- */
  --klk-hover-neutral:       rgba(0, 0, 0, 0.04);   /* neutral hover */
  --klk-hover-neutral-deep:  rgba(0, 0, 0, 0.10);   /* hover on already-filled bg */
  --klk-active-blue-bg:      rgba(22, 119, 255, 0.06);  /* selected / active */
  --klk-row-hover:           rgba(22, 119, 255, 0.06);  /* KLK table row hover (blue, not grey) */
  --klk-focus-ring:          0 0 0 4px rgba(22, 119, 255, 0.5);
  --klk-input-focus-ring:    0 0 0 2px rgba(5, 145, 255, 0.1);
  --klk-error-focus-ring:    0 0 0 2px rgba(255, 38, 5, 0.06);

  /* ---- Status Tag colors (Ant 5-color presets) -------------- */
  --klk-tag-success-bg: #F6FFED;  --klk-tag-success-border: #B7EB8F;  --klk-tag-success-text: #52C41A;
  --klk-tag-info-bg:    #E6F4FF;  --klk-tag-info-border:    #91CAFF;  --klk-tag-info-text:    #1677FF;
  --klk-tag-warning-bg: #FFFBE6;  --klk-tag-warning-border: #FFE58F;  --klk-tag-warning-text: #FAAD14;
  --klk-tag-error-bg:   #FFF1F0;  --klk-tag-error-border:   #FFCCC7;  --klk-tag-error-text:   #FF4D4F;
  --klk-tag-default-bg: #FAFAFA;  --klk-tag-default-border: #D9D9D9;  --klk-tag-default-text: rgba(0,0,0,0.88);

  /* ---- Component surface tokens ----------------------------- */
  --klk-table-header-bg: #FAFAFA;
  --klk-menu-selected-bg: #1677FF;
  --klk-delta-up:   #389E0D;
  --klk-delta-down: #FF4D4F;
}