/* DataTH Design System — Colors & Type tokens */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ------------------------------------------------------------------ */
  /*  BRAND CORE                                                         */
  /* ------------------------------------------------------------------ */
  --brand-purple:        #42145E;   /* Deep Amethyst Purple — wisdom / data depth */
  --brand-purple-ink:    #2D1946;   /* Logo ink variant — "th" in wordmark */
  --brand-red:           #DE2D37;   /* Crimson Energy — passion / action */
  --brand-red-logo:      #DD2D37;   /* Exact SVG hex from logo */

  /* Purple tints / shades */
  --purple-50:  #F6EEFB;
  --purple-100: #EAD7F5;
  --purple-200: #D0A6E8;
  --purple-300: #A66AC9;
  --purple-400: #7A3A9F;
  --purple-500: #42145E;   /* = brand-purple */
  --purple-600: #381050;
  --purple-700: #2D1946;   /* = brand-purple-ink */
  --purple-800: #1E0A33;
  --purple-900: #130620;

  /* Red tints / shades */
  --red-50:  #FEECEE;
  --red-100: #FBD0D3;
  --red-200: #F69BA1;
  --red-300: #EE636D;
  --red-400: #E3424D;
  --red-500: #DE2D37;     /* = brand-red */
  --red-600: #B8232D;
  --red-700: #8E1B23;
  --red-800: #651318;
  --red-900: #3E0C0F;

  /* ------------------------------------------------------------------ */
  /*  MASCOT ACCENTS (from hand-drawn rabbit illustrations)             */
  /* ------------------------------------------------------------------ */
  --blush-pink:    #F4A4A0;   /* rabbit cheeks */
  --mascot-ink:    #1E1B1A;   /* outline / linework */
  --star-yellow:   #F5C535;   /* sparkle stars */
  --cape-blue:     #2A4BD1;   /* starry cape */
  --leaf-green:    #9CD37A;   /* reading book */
  --cloud-white:   #F4F7F2;   /* cloud tint */

  /* ------------------------------------------------------------------ */
  /*  NEUTRALS                                                           */
  /* ------------------------------------------------------------------ */
  --white:       #FFFFFF;
  --paper:       #FDFCFB;     /* warm off-white — default bg */
  --cream:       #FBF7F2;     /* subtle warm canvas for illos */

  --grey-50:   #F7F7F8;
  --grey-100:  #EEEEF1;
  --grey-200:  #DDDEE3;
  --grey-300:  #C4C5CC;
  --grey-400:  #9A9BA5;
  --grey-500:  #71727E;
  --grey-600:  #4E4F5A;
  --grey-700:  #35363F;
  --grey-800:  #23242B;
  --grey-900:  #14151A;

  --charcoal:    #1F1B2E;     /* dark text, slightly purple-tinged */

  /* ------------------------------------------------------------------ */
  /*  SEMANTIC                                                           */
  /* ------------------------------------------------------------------ */
  --fg-1:        var(--charcoal);        /* primary text */
  --fg-2:        var(--grey-600);        /* secondary text */
  --fg-3:        var(--grey-500);        /* tertiary / meta */
  --fg-muted:    var(--grey-400);        /* placeholder */
  --fg-inverse:  var(--white);

  --bg-1:        var(--paper);           /* page */
  --bg-2:        var(--grey-50);         /* raised panel */
  --bg-3:        var(--grey-100);        /* deeper panel */
  --bg-inverse:  var(--purple-700);      /* dark bg (nav, footers) */

  --border-1:    var(--grey-200);        /* hairline */
  --border-2:    var(--grey-300);        /* strong */
  --border-ink:  var(--mascot-ink);      /* hand-drawn outline */

  --accent:       var(--brand-red);
  --accent-hover: var(--red-600);
  --accent-press: var(--red-700);
  --accent-soft:  var(--red-50);

  --primary:       var(--brand-purple);
  --primary-hover: var(--purple-600);
  --primary-soft:  var(--purple-50);

  --success:  #1F9D55;
  --warning:  #E5A32A;
  --danger:   var(--brand-red);
  --info:     #3865CE;

  /* ------------------------------------------------------------------ */
  /*  TYPE                                                               */
  /* ------------------------------------------------------------------ */
  /* Display/headings can use loopless for modern feel.
     Body MUST use looped (มีหัว) Thai for readability. */
  --font-display: 'Plus Jakarta Sans', 'Sarabun', system-ui, sans-serif;
  --font-sans:    'Sarabun', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-thai:    'Sarabun', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   52px;
  --text-5xl:   68px;
  --text-6xl:   88px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ------------------------------------------------------------------ */
  /*  SHAPE                                                              */
  /* ------------------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   8px;    /* min per brand guideline */
  --radius-md:   12px;
  --radius-lg:   16px;   /* max per brand guideline for cards */
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------ */
  /*  SPACING (8-pt grid, tight 4-pt rung)                               */
  /* ------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ------------------------------------------------------------------ */
  /*  SHADOW                                                             */
  /* ------------------------------------------------------------------ */
  --shadow-xs:   0 1px 2px rgba(31, 27, 46, 0.06);
  --shadow-sm:   0 2px 6px rgba(31, 27, 46, 0.08);
  --shadow-md:   0 6px 18px rgba(31, 27, 46, 0.10), 0 1px 3px rgba(31, 27, 46, 0.06);
  --shadow-lg:   0 18px 40px rgba(31, 27, 46, 0.14), 0 2px 6px rgba(31, 27, 46, 0.06);
  --shadow-xl:   0 32px 60px rgba(31, 27, 46, 0.18);
  --shadow-red:  0 10px 30px rgba(222, 45, 55, 0.28);   /* glow under CTAs */
  --shadow-purple: 0 10px 30px rgba(66, 20, 94, 0.24);

  /* Hand-drawn feel: offset 2px hard shadow */
  --shadow-stamp: 3px 3px 0 var(--mascot-ink);
  --shadow-stamp-red: 3px 3px 0 var(--brand-red);

  /* ------------------------------------------------------------------ */
  /*  MOTION                                                             */
  /* ------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;
}

/* =====================================================================
   SEMANTIC TYPE CLASSES
   ===================================================================== */
.display-1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-red);
}
.lead {
  font-family: var(--font-thai);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.body {
  font-family: var(--font-thai);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}
.body-sm {
  font-family: var(--font-thai);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--grey-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--purple-700);
}

/* Small reset helpful when embedding */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
}