/* =========================================================
   ลงทุน Diary — Design Tokens
   Colors and Typography
   ========================================================= */

/* ---------- Webfont imports (Google Fonts substitutes) -----
   Originals are unknown — using Google Fonts fallbacks that
   match the hand-drawn diary feel of the brand:
   - "Caveat" stands in for the hand-lettered "DIARY / MY INVESTING JOURNAL" script
   - "Patrick Hand" for casual handwritten body and labels
   - "Mitr" for the Thai-supporting display/headline (Thai brandmark "ลงทุน")
   - "Sarabun" for Thai/Latin body text
   FLAG: Provide the original font files if available so we can
         swap these out for pixel-perfect matches.
----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Patrick+Hand&family=Mitr:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Brand color primitives ---------- */
  /* Cream — the paper of the diary */
  --cream-50:  #faf8ee;   /* lightest paper */
  --cream-100: #f0f0e0;   /* primary paper / page background */
  --cream-200: #e6e4d2;   /* hover paper */
  --cream-300: #d8d4bc;   /* divider on cream */
  --cream-400: #d0d0b8;   /* youtube banner / dustier paper */

  /* Sage — the diary cover */
  --sage-100: #cfd5c0;
  --sage-200: #b8c0a8;
  --sage-300: #a0a890;
  --sage-400: #889878;    /* PRIMARY sage (logo cover) */
  --sage-500: #6e7e60;    /* deeper sage */
  --sage-600: #556547;

  /* Forest — the ink */
  --forest-700: #485840;
  --forest-800: #384830;
  --forest-900: #304828;  /* PRIMARY ink (logo outline & text) */
  --forest-950: #1f2e1a;

  /* Pen — pure ink for occasional strict contrast */
  --ink-black: #000000;

  /* Optional accents — pulled from the diary world,
     used VERY sparingly for status or callouts only.   */
  --accent-tomato: #c25d4f;   /* loss / red pen */
  --accent-honey:  #d6a64a;   /* highlight / sticky-note */
  --accent-sky:    #6f8d9c;   /* link / cool note */

  /* ---------- Semantic colors ---------- */

  /* Surfaces */
  --bg-page:       var(--cream-100);
  --bg-page-warm:  var(--cream-50);
  --bg-banner:     var(--cream-400);
  --bg-card:       var(--cream-50);
  --bg-card-sage:  var(--sage-400);   /* sage card / book cover surface */
  --bg-divider:    var(--cream-300);

  /* Foreground (text) */
  --fg-1: var(--forest-900);   /* primary ink */
  --fg-2: var(--forest-700);   /* secondary ink */
  --fg-3: var(--sage-500);     /* muted ink / metadata */
  --fg-on-sage: var(--cream-50);   /* text on sage cover */
  --fg-on-forest: var(--cream-50); /* text on forest */

  /* Borders / outlines (the diary uses thin ink outlines everywhere) */
  --line-1: var(--forest-900);   /* hairline ink stroke */
  --line-2: var(--sage-500);     /* softer rule */
  --line-3: var(--cream-300);    /* faintest separator */
  --line-weight: 2px;            /* signature outline thickness */

  /* Status (sparingly used) */
  --status-gain:    #5d8a5e;
  --status-loss:    var(--accent-tomato);
  --status-warn:    var(--accent-honey);
  --status-info:    var(--accent-sky);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(48, 72, 40, 0.35);

  /* ---------- Typography stacks ---------- */
  --font-script:    'Caveat', 'Patrick Hand', 'Comic Sans MS', cursive;       /* hand-lettered display */
  --font-hand:      'Patrick Hand', 'Caveat', 'Comic Sans MS', cursive;       /* hand-written body */
  --font-display:   'Mitr', 'Sarabun', 'Trebuchet MS', system-ui, sans-serif; /* Thai-friendly display */
  --font-body:      'Sarabun', 'Mitr', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale ---------- */
  /* The diary mixes a hand-lettered script for headers with a
     practical Thai sans for body. Sizes step in a relaxed ratio. */
  --fs-hero:     clamp(54px, 6vw, 99px);   /* hand-lettered hero */
  --fs-display:  clamp(41px, 4vw, 63px);
  --fs-h1:       45px;
  --fs-h2:       36px;
  --fs-h3:       27px;
  --fs-h4:       23px;
  --fs-body-lg:  20px;
  --fs-body:     18px;
  --fs-caption:  16px;
  --fs-tiny:     14px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-loose:   1.7;

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

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;     /* book corner */
  --radius-lg:  22px;     /* book cover corner */
  --radius-pill: 999px;
  --radius-organic: 22px 26px 18px 24px;  /* hand-drawn, slightly uneven */

  /* ---------- Shadows ---------- */
  /* The diary world uses ink outlines more than soft shadows.
     Shadows are flat and offset, like a stack of notebooks. */
  --shadow-page:  0 1px 0 var(--cream-300);
  --shadow-card:  3px 4px 0 var(--forest-900);   /* offset ink shadow */
  --shadow-card-soft: 0 6px 18px rgba(48, 72, 40, 0.08);
  --shadow-stack: 4px 6px 0 var(--sage-500), 8px 12px 0 var(--forest-900);
  --shadow-press: 1px 1px 0 var(--forest-900);

  /* ---------- Motion ---------- */
  --ease-paper:  cubic-bezier(.2, .8, .2, 1);
  --ease-flip:   cubic-bezier(.65, 0, .35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* =========================================================
   Semantic element styles — apply to bare HTML where useful
   ========================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  letter-spacing: 0.5px;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

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

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cream-200);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--forest-800);
}

a {
  color: var(--forest-900);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sage-300);
  transition: text-decoration-color var(--dur-base) var(--ease-paper);
}
a:hover {
  text-decoration-color: var(--forest-900);
}

hr {
  border: none;
  border-top: 1px dashed var(--line-2);
  margin: var(--space-6) 0;
}

/* Hand-lettered display utility — for the brand voice */
.handletter {
  font-family: var(--font-script);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* The signature ink outline used on cards, buttons, badges */
.ink-outline {
  border: var(--line-weight) solid var(--line-1);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}