/* ──────────────────────────────────────────────────────────────────────────
   Kodtuaeng (กอดตัวเองให้เป็น / Parts Work)
   Design tokens — colors, typography, motion, spacing
   --------------------------------------------------------------------------
   Brand voice: gentle, warm, intelligent. The visual world is a hand-drawn
   notebook on cream paper — soft crayon textures, gradient blobs, doodled
   flowers and faces. Avoid corporate / neon / sharp digital aesthetics.
   ────────────────────────────────────────────────────────────────────── */

/* — Webfonts ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: "RD Plaphao";
  src: url("./fonts/RDPlaphaothin.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "RD Plaphao";
  src: url("./fonts/RDPlaphao.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "RD Plaphao";
  src: url("./fonts/RDPlaphaobold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* English display fallback — closest match to hand-drawn marker English
   ("Parts Work", "Who are we?", "All parts welcome.") is Patrick Hand /
   Pangolin. Flagged as a substitution — user may supply the real font. */
@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Pangolin&family=Caveat:wght@500;700&display=swap");


:root {
  /* ── Colors ─────────────────────────────────────────────────────────── */

  /* Paper / surfaces — cream notebook tones */
  --paper:           #F8F1DF;   /* primary surface, page background */
  --paper-warm:      #F4E9C9;   /* slightly more amber */
  --paper-soft:      #FBF6E9;   /* lifted card */
  --grid-line:       #C9D8E4;   /* notebook grid lines — soft cool blue */
  --grid-line-soft:  rgba(150, 178, 200, 0.28);

  /* Ink — text + outline */
  --ink:             #1C1A17;   /* primary text + outline */
  --ink-soft:        #3A352F;   /* secondary text */
  --ink-mute:        #7A736A;   /* tertiary / captions */
  --ink-faint:       #B7AE9E;   /* disabled / hints */

  /* Parts palette — the four IFS "parts" colors from the logo & blobs.
     Drawn from crayon/pastel pigment, never neon. */
  --part-red:        #D7574F;   /* heart / the protector */
  --part-tan:        #D29A6A;   /* warm brown — the carer  */
  --part-green:      #8AAE6C;   /* sprout / the explorer   */
  --part-blue:       #5B9DC4;   /* water / the firefighter */
  --part-yellow:     #E8C76D;   /* spark / sunlight        */

  /* Soft tints — gradient blob mid-tones (used on launch series) */
  --tint-red:        #F2C7B8;
  --tint-tan:        #EBD0AB;
  --tint-green:      #C7D8B0;
  --tint-blue:       #B6D2E1;
  --tint-yellow:     #F2DFA7;

  /* Semantic */
  --bg:              var(--paper);
  --bg-elev:         var(--paper-soft);
  --fg:              var(--ink);
  --fg-2:            var(--ink-soft);
  --fg-3:            var(--ink-mute);
  --accent:          var(--part-red);
  --link:            var(--part-blue);
  --border:          rgba(28, 26, 23, 0.14);
  --border-strong:   rgba(28, 26, 23, 0.85);


  /* ── Typography ─────────────────────────────────────────────────────── */

  /* Type families
     – display-th : RD Plaphao  — chunky rounded Thai, primary brand voice
     – display-en : Patrick Hand — hand-drawn English marker (SUBSTITUTE
                                   for the unknown English face in artwork)
     – script     : Caveat       — handwritten flourishes, small marks
     – body       : RD Plaphao   — Thai-first; English falls back to
                                   Patrick Hand for warmth, never sans  */
  --font-display-th: "RD Plaphao", "Patrick Hand", "Comic Sans MS", system-ui, sans-serif;
  --font-display-en: "Patrick Hand", "RD Plaphao", "Comic Sans MS", cursive;
  --font-script:     "Caveat", "Patrick Hand", cursive;
  --font-body:       "RD Plaphao", "Patrick Hand", "Pangolin", system-ui, sans-serif;
  --font-mono:       ui-monospace, "JetBrains Mono", "SFMono-Regular", monospace;

  /* Sizes — generous; Thai display reads bigger than Latin at same px */
  --fs-display:   88px;
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-lead:      22px;
  --fs-body:      20px;
  --fs-small:     20px;
  --fs-caption:   20px;

  /* Line heights — loose, breathing room is part of the brand */
  --lh-display:   1.05;
  --lh-heading:   1.15;
  --lh-body:      1.55;
  --lh-tight:     1.25;

  /* Letter-spacing — RD Plaphao is already rounded; keep neutral */
  --tracking-display: -0.005em;
  --tracking-body:     0em;
  --tracking-caps:     0.06em;


  /* ── Geometry ───────────────────────────────────────────────────────── */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-xl:    32px;
  --radius-blob:  48% 52% 62% 38% / 55% 45% 55% 45%; /* organic blob */
  --radius-pill:  999px;

  /* Spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* Shadows — soft pencil drop, never digital glow */
  --shadow-sketch: 2px 3px 0 rgba(28,26,23,0.10);
  --shadow-soft:   0 8px 24px -12px rgba(28,26,23,0.18);
  --shadow-card:   0 14px 36px -22px rgba(28,26,23,0.28);

  /* Motion — gentle; sit-down, never bounce-out */
  --ease-gentle:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-soft:    cubic-bezier(0.34, 1.10, 0.64, 1.00);
  --dur-quick:    160ms;
  --dur-base:     260ms;
  --dur-slow:     420ms;
}


/* ── Element defaults ──────────────────────────────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display-th);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-display-th);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  margin: 0 0 var(--s-3);
}

h3, .h3 {
  font-family: var(--font-display-th);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-2);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: var(--tracking-caps);
}

.script {
  font-family: var(--font-script);
  font-weight: 500;
}

.display-en {
  font-family: var(--font-display-en);
  font-weight: 400;
}

/* The signature gradient-blob highlight used on body text */
.blob-mark {
  display: inline-block;
  padding: 0.1em 0.6em;
  background: radial-gradient(ellipse at 30% 40%,
      var(--tint-yellow), var(--tint-green) 70%, transparent 75%);
  border-radius: var(--radius-blob);
}