/* Wisesight Brand Design Tokens — CSS custom properties.
   Mirror of tokens.json. Source of truth: index.html. Audit rules: llms.txt.
   Import: <link rel="stylesheet" href="tokens.css"> then use var(--ws-*). */

:root {
  /* --- Primary --- */
  --ws-red: #850219;          /* attention/accent only — never a background */
  --ws-black: #101820;        /* primary text / information */
  --ws-gray: #CDCFDB;         /* sub-information */

  /* --- Surfaces / backgrounds (approved) --- */
  --ws-surface-white: #FFFFFF;
  --ws-surface-gray: #F2F3F6; /* Gray-100, standard neutral background */
  --ws-surface-black: #101820;

  /* --- Text --- */
  --ws-text: #101820;
  --ws-text-muted: #3C3E47;   /* Neutral D1 — softer near-black for long-form body copy */
  --ws-text-on-red: #FFFFFF;

  /* --- Secondary (use after primary; limited set per piece) --- */
  --ws-steel-blue: #3A4F7A;
  --ws-signal-blue: #2677D9;
  --ws-royal-purple: #3B2C5C;
  --ws-royal-indigo: #5B4B8A;
  --ws-emerald: #004A25;
  --ws-jewel-emerald: #1F6B5A;
  --ws-rose-pink: #C15A7A;
  --ws-terracotta-red: #C4504B;
  --ws-ivory-white: #EBE6E2;
  --ws-mint-green: #6FC9A4;
  --ws-amber-orange: #E8893A;

  /* --- Data visualization ---
     Series default to neutral. Emphasize the ONE point that matters with black
     OR a single Wisesight Red focus accent (one mark only). Keep red doing one
     job per chart: if red marks negative data (#B22234) don't also use Wisesight
     Red for focus. See DATAVIZ-* in llms.txt. */
  --ws-chart-neutral: #CDCFDB;   /* default series — no emphasis */
  --ws-chart-emphasis: #101820;  /* highlight the ONE key series — dark contrast */
  --ws-chart-focus: #850219;     /* optional Wisesight Red focus accent on the ONE key point (non-negative) */
  --ws-chart-negative: #B22234;  /* negative/decline/alert data only (red = "bad") */
  --ws-chart-other: #B8BCC8;     /* grouped "Other" bucket */
  --ws-chart-gridline: #E6E7EC;
  /* categorical series — assign in this order, stop early */
  --ws-chart-cat-1: #3A4F7A;     /* Steel Blue */
  --ws-chart-cat-2: #1F6B5A;     /* Jewel Emerald */
  --ws-chart-cat-3: #E8893A;     /* Amber Orange */
  --ws-chart-cat-4: #5B4B8A;     /* Royal Indigo */
  --ws-chart-cat-5: #2677D9;     /* Signal Blue */
  --ws-chart-cat-6: #C15A7A;     /* Rose Pink */
  /* sentiment — fixed diverging palette */
  --ws-sentiment-positive: #9AB73D;
  --ws-sentiment-neutral: #E7BB44;
  --ws-sentiment-negative: #B22234;
  /* sequential — single-hue red ramp for intensity/heatmaps (low -> high) */
  --ws-seq-1: #F0D3D6;
  --ws-seq-2: #E0A7AE;
  --ws-seq-3: #D17A85;
  --ws-seq-4: #B23A4E;
  --ws-seq-5: #850219;

  /* --- Gradients (ONLY these four are approved) --- */
  --ws-gradient-red-black-90: linear-gradient(90deg, #850219 0%, #101820 100%);
  --ws-gradient-red-black-180: linear-gradient(180deg, #850219 0%, #101820 100%);
  --ws-gradient-white-gray-90: linear-gradient(90deg, #FFFFFF 0%, #F2F3F6 100%);
  --ws-gradient-white-gray-180: linear-gradient(180deg, #FFFFFF 0%, #F2F3F6 100%);

  /* --- Corner radius (no other values; pill for capsules) --- */
  --ws-radius-none: 0px;      /* sharp 90° — allowed */
  --ws-radius-sm: 5px;
  --ws-radius-md: 10px;
  --ws-radius-pill: 9999px;

  /* --- Shadow (the one approved value; or none) --- */
  --ws-shadow-flat: none;
  --ws-shadow: 0px 4px 12px 0px rgba(16, 24, 32, 0.18);

  /* --- Spacing (8px base; use multiples of 8) --- */
  --ws-space-1: 8px;
  --ws-space-2: 16px;
  --ws-space-3: 24px;
  --ws-space-4: 32px;
  --ws-space-6: 48px;          /* min desktop page/slide margin */
  --ws-space-8: 64px;

  /* --- Grid --- */
  --ws-grid-columns: 12;

  /* --- Typography --- */
  --ws-font-ui: 'Roboto', sans-serif;
  --ws-font-formal: 'Sarabun', sans-serif;        /* Thai + Latin */
  --ws-font-additional: 'Prompt', 'Kanit', 'Poppins', 'IBM Plex Sans', sans-serif;
  --ws-weight-light: 300;
  --ws-weight-regular: 400;
  --ws-weight-medium: 500;
  --ws-weight-semibold: 600;
  --ws-weight-bold: 700;
}