/*
 * TREE(3) Intelligence — Color & Typography Tokens
 * Single source of truth for all design system variables.
 * Import this file first in every HTML prototype.
 */

/* ─── Local Fonts ────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Garet';
  src: url('./fonts/Garet-Heavy.woff2') format('woff2'),
       url('./fonts/Garet-Heavy.woff') format('woff');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Garet';
  src: url('./fonts/Garet-Book.woff2') format('woff2'),
       url('./fonts/Garet-Book.woff') format('woff');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sukhumvit Set';
  src: url('./fonts/SukhumvitSet-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sukhumvit Set';
  src: url('./fonts/SukhumvitSet-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sukhumvit Set';
  src: url('./fonts/SukhumvitSet-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sukhumvit Set';
  src: url('./fonts/SukhumvitSet-Text.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sukhumvit Set';
  src: url('./fonts/SukhumvitSet-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sukhumvit Set';
  src: url('./fonts/SukhumvitSet-Thin.ttf') format('truetype');
  font-weight: 100 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sarabun';
  src: url('./fonts/Sarabun-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('./fonts/Sarabun-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('./fonts/Sarabun-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('./fonts/Sarabun-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sarabun';
  src: url('./fonts/Sarabun-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{font-family:'JetBrains Mono';src:url('./fonts/JetBrainsMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('./fonts/JetBrainsMono-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('./fonts/JetBrainsMono-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('./fonts/JetBrainsMono-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('./fonts/JetBrainsMono-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* ─── Google Fonts (Sarabun + IBM Plex Sans Thai fallback + JetBrains Mono) ─ */
/* Include this <link> in <head> when using this stylesheet:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
*/

/* ─── Design Tokens ──────────────────────────────────────────────────────── */

:root {
  /* Brand Core */
  --brand-blue-deep:  #1C75BB;
  --brand-blue-mid:   #2A8DCA;
  --brand-blue-light: #29A9DF;

  /* Blue Scale */
  --blue-50:  #E8F4FB;
  --blue-100: #C6E2F4;
  --blue-200: #9ECEEC;
  --blue-300: #6FB7E2;
  --blue-400: #4AA5DB;
  --blue-500: #29A9DF;   /* = brand-light */
  --blue-600: #2A8DCA;   /* = brand-mid   */
  --blue-700: #1C75BB;   /* = brand-deep  — PRIMARY */
  --blue-800: #155A91;   /* active/pressed */
  --blue-900: #0E3F66;   /* dark surfaces  */

  /* Neutral Scale */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F9FB;
  --neutral-100: #EEF2F5;
  --neutral-200: #DDE3E8;
  --neutral-300: #C2CBD3;
  --neutral-400: #99A4AE;
  --neutral-500: #6C7682;
  --neutral-600: #4A535D;
  --neutral-700: #2F363D;
  --neutral-800: #1A1F25;
  --neutral-900: #000000;

  /* Semantic */
  --success:    #16A34A;  --success-bg: #E8F7EE;
  --warning:    #D97706;  --warning-bg: #FEF3E2;
  --error:      #DC2626;  --error-bg:   #FCE8E8;
  --info:       #29A9DF;  --info-bg:    #E8F4FB;

  /* Typography */
  --font-display: 'Sukhumvit Set', 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
  --font-body:    'Sarabun', 'IBM Plex Sans Thai', sans-serif;
  --font-brand:   'Garet', 'Outfit', sans-serif;
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;

  /* Type Scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3.25rem;    /* 52px */
  --text-6xl:  4.5rem;     /* 72px */

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Spacing — 8pt grid (multiples of 4px) */
  --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;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* Shadows (brand-tinted blue) */
  --shadow-xs:    0 1px 2px rgba(28,117,187,0.06);
  --shadow-sm:    0 2px 4px rgba(28,117,187,0.08), 0 1px 2px rgba(28,117,187,0.06);
  --shadow-md:    0 6px 12px rgba(28,117,187,0.10), 0 2px 4px rgba(28,117,187,0.06);
  --shadow-lg:    0 14px 28px rgba(28,117,187,0.12);
  --shadow-xl:    0 24px 48px rgba(28,117,187,0.18);
  --shadow-focus: 0 0 0 4px rgba(41,169,223,0.30);

  /* Motion */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 220ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
}

/* ─── Base Styles ────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--neutral-800);
  background: var(--neutral-0);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--neutral-800);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-base); }

p {
  margin: 0;
  line-height: var(--leading-normal);
  color: var(--neutral-600);
}

a {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--blue-800); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ─── Semantic Utility Classes ───────────────────────────────────────────── */

/* Colors */
.text-primary   { color: var(--blue-700); }
.text-muted     { color: var(--neutral-500); }
.text-secondary { color: var(--neutral-600); }
.text-white     { color: #fff; }
.bg-surface     { background: var(--neutral-50); }
.bg-dark        { background: var(--blue-900); }

/* Type roles */
.display        { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.brand          { font-family: var(--font-brand); font-weight: 700; }
.mono           { font-family: var(--font-mono); }
.label          { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.eyebrow        { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
                  color: var(--blue-700); background: var(--blue-50);
                  padding: 4px 10px; border-radius: var(--radius-full); display: inline-block; }
.lead           { font-size: var(--text-xl); font-weight: 500; line-height: var(--leading-normal); color: var(--neutral-600); }

/* ─── Focus Ring ─────────────────────────────────────────────────────────── */

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-md);
}