/* =====================================================
   NCBS Design Tokens
   Source: NCBS Design System (Figma) — verified 2026-05-27
   Colors extracted from Figma Design System screenshots
   Pattern: 25=ultra-light … 50=lightest … 500=core … 900=darkest
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@500;600;700&display=swap');

:root {
  /* ================================================
     OFFICIAL CI 2026 — Logo & Brand Identity
     Trust #661AE3 · Innovation #BA68C8 · Clarity #FFD740
     Font (display): Baloo Chettan 2
     ================================================ */
  --ci-trust:      #661AE3;
  --ci-innovation: #BA68C8;
  --ci-clarity:    #FFD740;
  --font-display:  'Baloo Chettan 2', 'Noto Sans Thai', sans-serif;

  /* ================================================
     PURPLE — Primary Brand
     Screenshot: 17.35.21  |  Core: #5E20DA
     ================================================ */
  --purple-25:  #f4f0ff;   /* ← Ultra-light — hover/selected bg */
  --purple-50:  #D6CEFB;
  --purple-100: #BCB1F9;
  --purple-200: #A292F8;
  --purple-300: #8973F3;
  --purple-400: #6E49E9;
  --purple-500: #661AE3;   /* ← Core brand purple (Official CI 2026: Trust) */
  --purple-600: #4809B9;
  --purple-700: #330493;
  --purple-800: #210269;
  --purple-900: #130147;

  /* ================================================
     RED — Error / Critical / Destructive
     Screenshot: 17.34.54  |  Core: #DD524C
     ================================================ */
  --red-25:  #fdf3f2;   /* ← Ultra-light — hover/selected bg */
  --red-50:  #FAE1DF;
  --red-100: #F6C7C4;
  --red-200: #F3AAA7;
  --red-300: #E68D8B;
  --red-400: #D57070;
  --red-500: #DD524C;      /* ← Core red */
  --red-600: #CA3A31;
  --red-700: #B32935;
  --red-800: #901C1B;
  --red-900: #6A110A;

  /* ================================================
     GREEN — Success / Positive
     Screenshot: 17.35.13, 17.35.21  |  Core: #43946C
     ================================================ */
  --green-25:  #f0fdf5;   /* ← Ultra-light — hover/selected bg */
  --green-50:  #D9F9E6;
  --green-100: #D1F6C7;
  --green-200: #B4E7A6;
  --green-300: #96D485;
  --green-400: #6EB65B;
  --green-500: #43946C;     /* ← Core green */
  --green-600: #347659;
  --green-700: #347820;
  --green-800: #285E47;
  --green-900: #163A0A;

  /* ================================================
     BLUE — Info / Neutral Status
     Screenshot: 17.34.54  |  Core: #4382CF
     ================================================ */
  --blue-25:  #eceffb;   /* ← Ultra-light — hover/selected bg */
  --blue-50:  #D0D8F6;
  --blue-100: #B3BCDF;
  --blue-200: #8BC2FA;
  --blue-300: #61A1F1;
  --blue-400: #4382CF;      /* ← Core blue */
  --blue-500: #4382CF;
  --blue-600: #2A63AE;
  --blue-700: #1C4883;
  --blue-800: #303A71;
  --blue-900: #1D2556;

  /* ================================================
     ORANGE — Warning / Attention
     Screenshot: 17.34.45  |  Core: #E87B35
     ================================================ */
  --orange-25:  #fef8ef;   /* ← Ultra-light — hover/selected bg */
  --orange-50:  #FCEDD8;
  --orange-100: #F8D9B0;
  --orange-200: #F3BD7F;
  --orange-300: #E87B35;    /* ← Core orange */
  --orange-400: #B44B22;
  --orange-500: #E87B35;
  --orange-600: #8E3B1F;
  --orange-700: #72321B;
  --orange-800: #3E170B;
  --orange-900: #3E170B;

  /* ================================================
     YELLOW / GOLD — Highlight / Premium
     Screenshot: 17.35.37  |  Core: #F7D04E
     ================================================ */
  --yellow-25:  #fffcf2;   /* ← Ultra-light — hover/selected bg */
  --yellow-50:  #FEF7DF;
  --yellow-100: #FDF0C6;
  --yellow-200: #FBE8AC;
  --yellow-300: #F9DC7E;
  --yellow-400: #FFD740;    /* ← Core gold (Official CI 2026: Clarity) */
  --yellow-500: #D1B040;
  --yellow-600: #A88D32;
  --yellow-700: #7C6722;
  --yellow-800: #524314;
  --yellow-900: #322909;

  /* ================================================
     PINK / ROSE — Accent
     Screenshot: 17.35.30, 17.35.37  |  Core: #E14F61
     ================================================ */
  --pink-25:  #fcecee;   /* ← Ultra-light — hover/selected bg */
  --pink-50:  #F7CFD4;
  --pink-100: #F1A8B0;
  --pink-200: #EA7987;
  --pink-300: #E14F61;      /* ← Core pink */
  --pink-400: #CE364D;
  --pink-500: #AE2A40;
  --pink-600: #92233B;
  --pink-700: #7D2038;
  --pink-800: #490F24;
  --pink-900: #450C1A;

  /* ================================================
     NEUTRAL — Gray Scale
     ================================================ */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F1B2E;
  --gray-900: #111827;
  --white:    #FFFFFF;
  --black:    #000000;

  /* ================================================
     SEMANTIC ALIASES — mapped to color scales
     ================================================ */
  --color-primary:       var(--purple-500);
  --color-primary-hover: var(--purple-700);
  --color-primary-light: var(--purple-50);
  --color-primary-dark:  var(--purple-800);

  --color-success:       var(--green-500);
  --color-success-light: var(--green-100);
  --color-success-dark:  var(--green-700);

  --color-warning:       var(--orange-300);
  --color-warning-light: var(--orange-100);
  --color-warning-dark:  var(--orange-600);

  --color-error:         var(--red-500);
  --color-error-light:   var(--red-50);
  --color-error-dark:    var(--red-800);

  --color-info:          var(--blue-400);
  --color-info-light:    var(--blue-50);
  --color-info-dark:     var(--blue-600);

  /* ================================================
     CHART PALETTE
     ================================================ */
  --chart-1: var(--purple-500);
  --chart-2: var(--blue-400);
  --chart-3: var(--green-500);
  --chart-4: var(--orange-300);
  --chart-5: var(--red-500);
  --chart-6: var(--yellow-400);
  --chart-7: var(--pink-300);
  --chart-other: var(--gray-300);

  /* ================================================
     TYPOGRAPHY
     ================================================ */
  --font-heading: 'Noto Sans Thai', sans-serif;
  --font-body: 'Noto Sans Thai', sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-h1: 28px;
  --text-h2: 22px;
  --text-h3: 18px;
  --text-body-l: 20px;
  --text-body: 18px;
  --text-body-s: 16px;
  --text-caption: 12px;
  --text-data: 24px;

  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-light: 300;

  --leading-tight: 1.2;
  --leading-normal: 1.3;
  --leading-relaxed: 1.5;

  /* ================================================
     SPACING (4px base)
     ================================================ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ================================================
     LAYOUT
     ================================================ */
  --sidebar-width: 280px;
  --content-max-width: 1440px;
  --card-min-width: 240px;
  --table-row-height: 48px;

  /* ================================================
     BORDER RADIUS
     ================================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ================================================
     SHADOWS
     ================================================ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);

  /* ================================================
     FOCUS RINGS
     ================================================ */
  --focus-ring: 0 0 0 2px var(--purple-500);
  --focus-ring-error: 0 0 0 2px var(--red-500);
  --focus-ring-sidebar: 0 0 0 2px var(--purple-300);
}