/* ============================================================
   COLOR TOKENS — Kittikun Jitpairod Visual Identity
   Cool computational core; maroon & gold are restrained,
   contextual accents only.
   ============================================================ */

:root {
  /* --- Brand: raw values --- */
  --kj-violet: #6B4CF0;          /* primary */
  --kj-magenta: #C24BE0;         /* secondary */
  --kj-cyan: #19B6CC;            /* accent · data */
  --kj-very-peri: #6868AC;       /* institutional / CMU-facing, calm fills */
  --kj-candlelight: #FAAC1E;     /* warm accent ONLY */
  --kj-ce-maroon: #5B171E;       /* departmental anchor ONLY */

  /* Accessible-on-light text variants */
  --kj-violet-deep: #4631B0;
  --kj-magenta-deep: #9A2FB8;

  /* Signature gradient — recolour marks ONLY via this two-stop */
  --kj-gradient: linear-gradient(135deg, #6B4CF0 0%, #C24BE0 100%); /* @kind color */
  --kj-gradient-stop-1: #6B4CF0;
  --kj-gradient-stop-2: #C24BE0;

  /* --- Neutrals: raw values --- */
  --kj-ink: #18181F;             /* primary text */
  --kj-slate: #5B5B6B;           /* muted text */
  --kj-line: #E5E4EA;            /* borders */
  --kj-paper: #F4F4F6;           /* page background */
  --kj-surface: #FFFFFF;         /* cards */

  /* Extended neutral ramp (derived, for hovers/fills) */
  --kj-ink-90: #2A2A33;
  --kj-slate-60: #8A8A98;
  --kj-line-soft: #EFEEF2;

  /* Tinted brand fills (subtle backgrounds) */
  --kj-violet-tint: #F0EDFE;
  --kj-magenta-tint: #FAECFC;
  --kj-cyan-tint: #E4F6F9;
  --kj-candlelight-tint: #FEF3DC;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */

  /* Surfaces & lines */
  --surface-page: var(--kj-paper);
  --surface-card: var(--kj-surface);
  --surface-raised: var(--kj-surface);
  --surface-sunken: var(--kj-paper);
  --surface-inverse: var(--kj-ink);
  --border-default: var(--kj-line);
  --border-strong: #D5D4DC;
  --border-focus: var(--kj-violet);

  /* Text */
  --text-strong: var(--kj-ink);
  --text-body: #34343F;
  --text-muted: var(--kj-slate);
  --text-faint: var(--kj-slate-60);
  --text-inverse: var(--kj-surface);
  --text-link: var(--kj-violet-deep);
  --text-accent: var(--kj-magenta-deep);

  /* Brand roles */
  --brand-primary: var(--kj-violet);
  --brand-secondary: var(--kj-magenta);
  --brand-data: var(--kj-cyan);
  --brand-institutional: var(--kj-very-peri);

  /* Interactive (buttons) */
  --action-primary: var(--kj-violet);
  --action-primary-hover: #5C3FE0;
  --action-primary-active: #4E33CC;
  --action-on-primary: #FFFFFF;

  /* Status / semantic feedback */
  --status-info: var(--kj-cyan);
  --status-success: #1F9D6B;
  --status-warning: var(--kj-candlelight);
  --status-danger: #D8473C;
  --status-info-tint: var(--kj-cyan-tint);
  --status-success-tint: #E2F4EC;
  --status-warning-tint: var(--kj-candlelight-tint);
  --status-danger-tint: #FBE9E7;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(107, 76, 240, 0.30);
}