/* ============================================================
   MWIT SQUARE — DESIGN TOKENS (fonts + colors + type + spacing)
   Imported from the Claude Design system for this project.
   Fonts load from Google Fonts CDN (binaries not redistributed).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Families ---- */
  --font-display: 'Chakra Petch', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Thai has no glyphs in IBM Plex Mono; list Plex Sans Thai next so Latin/
     digits stay mono (techno look) while Thai falls back to a real Thai face
     instead of an ugly system default. */
  --font-mono:    'IBM Plex Mono', 'IBM Plex Sans Thai', ui-monospace, 'SFMono-Regular', monospace;
  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);
  --font-label:   var(--font-display);

  /* ---- MWIT Blue (primary) — sampled from the logotype (#20408F) ---- */
  --blue-50:  #eef2fb;
  --blue-100: #d8e1f4;
  --blue-200: #aec1ea;
  --blue-300: #7e9ad9;
  --blue-400: #4c6cc2;
  --blue-500: #2d4fb0;
  --blue-600: #20408f;  /* brand core — the logo blue */
  --blue-700: #1b3578;
  --blue-800: #142a5e;
  --blue-900: #0e1c42;  /* deep space */
  --blue-950: #070f28;  /* the void — darkest section bg */

  /* ---- Star accent: amber -> orange (the "18th" gradient) ---- */
  --amber-50:  #fef6e7;
  --amber-100: #fde9c2;
  --amber-200: #fbd488;
  --amber-300: #fbc76b;
  --amber-400: #f7b23e;
  --amber-500: #f5a52a;  /* gold star — primary accent */
  --amber-600: #e08e16;
  --orange-400: #f59450;
  --orange-500: #f0802e;  /* orange — accent gradient end */
  --orange-600: #e2691c;
  --orange-700: #c2540f;

  /* ---- Neutrals: cool "moon dust" slate ---- */
  --white:    #ffffff;
  --paper:    #f7f8fb;
  --slate-50:  #f4f6fa;
  --slate-100: #eef1f6;
  --slate-200: #dde3ec;
  --slate-300: #c2cbd9;
  --slate-400: #94a0b5;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ---- Status ---- */
  --green-500: #15a862;
  --green-600: #0e8c50;
  --red-500:   #e5484d;
  --red-600:   #cf363b;
  --cyan-500:  #1e9fb8;

  /* ---- Semantic aliases ---- */
  --brand: var(--blue-600); --brand-strong: var(--blue-700); --brand-soft: var(--blue-50);
  --accent: var(--amber-500); --accent-strong: var(--orange-500); --accent-soft: var(--amber-50);
  --surface-page: var(--paper); --surface-card: var(--white); --surface-inverse: var(--blue-900); --surface-void: var(--blue-950);
  --text-strong: var(--slate-900); --text-body: var(--slate-700); --text-muted: var(--slate-500); --text-faint: var(--slate-400);
  --text-inverse: var(--white); --text-on-brand: var(--white); --text-on-accent: var(--blue-900); --text-link: var(--blue-600);
  --border-subtle: var(--slate-200); --border-default: var(--slate-300); --border-inverse: rgba(255,255,255,0.16);
  --ring: var(--blue-400); --ring-accent: var(--amber-400);

  /* ---- Signature gradients ---- */
  --grad-star:   linear-gradient(135deg, var(--amber-500) 0%, var(--orange-500) 100%);
  --grad-cosmos: linear-gradient(165deg, var(--blue-800) 0%, var(--blue-950) 100%);
  --grad-nebula: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);

  /* ---- Spacing / radii / motion ---- */
  --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 9999px;
  --shadow-md: 0 4px 12px rgba(14,28,66,0.10), 0 2px 4px rgba(14,28,66,0.06);
  --shadow-lg: 0 12px 28px rgba(14,28,66,0.14), 0 4px 10px rgba(14,28,66,0.08);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --container: 1200px;
}