/* ============================================================================
   T1 SERVICE — Brand Design Tokens
   "ปิดงบไม่ต้องลุ้น ภาษีไม่ต้องเดา"
   Premium accounting house · boutique private-advisory register
   Reimagined 2026-05 — supersedes the dark/lime "operator console" direction.
   ----------------------------------------------------------------------------
   Philosophy: A restrained, warm, printed palette of paper + deep forest ink,
   with ONE metallic whisper (brass). The saturated logo green is held back as
   a focal JEWEL — used small, never as a field. Precision is the luxury.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,600&family=Trirong:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@200;300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- METALLIC (the lead accent — antique gold, the expensive whisper) -- */
  --gold:        #9C7C4A;  /* THE accent. Monochrome lockups, rules, leaders, marks. */
  --gold-light:  #C5A572;  /* gold on ink / dark surfaces */
  --gold-deep:   #806237;  /* pressed / hairline-on-gold */
  --gold-tint:   #F0E9DA;  /* faint gold wash */
  /* legacy aliases (cards reference --brass*) → mapped to gold */
  --brass: var(--gold); --brass-light: var(--gold-light); --brass-tint: var(--gold-tint);

  /* ---- BRAND GREEN — RESTRICTED. Logo color-lockup only, never a field. -- */
  --green-jewel:   #63BC32;  /* the logo's own green. Appears only inside the color mark. */
  --green-deep:    #2F5E2A;  /* rare; positive-figure base if green is truly needed */
  --green-tint:    #ECF1E4;  /* faint focus wash */

  /* ---- INK (warm OBSIDIAN — espresso near-blacks, neutral, not green) ---- */
  --ink-900: #16130E;  /* display + strong text */
  --ink-800: #221E18;
  --ink-700: #34302A;  /* body text */
  --ink-600: #4A453E;
  --ink-500: #5E574E;  /* secondary text (AA on paper) */
  --ink-400: #837A6E;  /* muted / captions */
  --ink-300: #A89E90;  /* disabled, faint */

  /* ---- PAPER (warm ivory neutrals — the field) --------------------------- */
  --paper-0: #F6F2E9;  /* page background — warm ivory */
  --paper-1: #FCFAF3;  /* cards / raised surfaces */
  --paper-2: #EFE9DB;  /* sunken / alt rows / wells */
  --pearl:   #E6DECC;  /* tonal blocks */

  /* ---- HAIRLINES (the brand draws with lines, not boxes) ----------------- */
  --line-strong: #D2C9B6;
  --line:        #E3DBC9;
  --line-soft:   #EEE8D9;

  /* ---- SEMANTIC (deeply muted, premium — never neon) --------------------- */
  --pos:      #2F6B33;  --pos-bg:  #E9F0E4;  /* credit / increase / success */
  --neg:      #8F2A2A;  --neg-bg:  #F3E5E1;  /* debit / decrease / error (oxblood) */
  --warn:     #A8761C;  --warn-bg: #F5ECD7;  /* caution / pending (ochre) */
  --info:     #3C5562;  --info-bg: #E4ECEF;  /* note / neutral status (slate) */

  /* ---- ON-INK (text + accents over dark surfaces) ------------------------ */
  --on-ink-hi:  #F2ECDD;  /* primary text on ink */
  --on-ink-lo:  #B0A691;  /* secondary text on ink (warm) */
  --on-ink-line:#3A352C;  /* hairlines on ink */

  /* ====================================================================== */
  /* TYPE FAMILIES                                                          */
  /* Display : Trirong — one high-contrast serif spanning Thai + Latin.     */
  /*           Solves bilingual register in a single pen. Editorial weight. */
  /* Text    : IBM Plex Sans (+ Thai sibling) — trustworthy, calm, precise. */
  /* Figures : IBM Plex Mono — money, tax IDs, account codes, periods.      */
  /* ====================================================================== */
  /* Display : Bodoni Moda (Latin Didone) + Trirong (Thai). Bodoni has no    */
  /*           Thai glyphs, so Thai falls through to Trirong — both high-     */
  /*           contrast serifs, one editorial register across scripts.        */
  --font-display: 'Bodoni Moda', 'Trirong', Georgia, serif;
  --font-text:    'IBM Plex Sans', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'IBM Plex Sans Thai', ui-monospace, monospace;

  /* lining + tabular figures everywhere numbers live */
  --fig-tabular: "tnum" 1, "lnum" 1;

  /* ---- TYPE SCALE (1.250 major-third, editorial) ------------------------- */
  --t-display: 4.209rem;  /* 67px  hero numerals / cover */
  --t-h1:      3.157rem;  /* 50px */
  --t-h2:      2.369rem;  /* 38px */
  --t-h3:      1.777rem;  /* 28px */
  --t-h4:      1.333rem;  /* 21px */
  --t-lead:    1.25rem;   /* 20px intro paragraphs */
  --t-body:    1.0625rem; /* 17px */
  --t-small:   0.9375rem; /* 15px */
  --t-caption: 0.8125rem; /* 13px labels / legal */
  --t-micro:   0.6875rem; /* 11px overline */

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.62;
  --lh-loose: 1.75;

  --tracking-display: -0.005em;
  --tracking-over:    0.22em;   /* overlines / eyebrows */
  --tracking-figure:  0.01em;

  /* ---- SPACE (4px base; generous — luxury is what you leave out) --------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---- RADIUS (near-square; restraint, not bubbles) ---------------------- */
  --r-xs: 2px;  --r-sm: 4px;  --r-md: 6px;  --r-lg: 10px;  --r-pill: 999px;

  /* ---- ELEVATION (near-flat; warm, low, never glossy) -------------------- */
  --shadow-1: 0 1px 2px rgba(22,32,26,.05);
  --shadow-2: 0 2px 8px rgba(22,32,26,.07), 0 1px 2px rgba(22,32,26,.05);
  --shadow-3: 0 8px 28px rgba(22,32,26,.10), 0 2px 6px rgba(22,32,26,.06);

  /* ---- MOTION (calm, considered; no bounce) ------------------------------ */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-1: 120ms;  --dur-2: 200ms;  --dur-3: 320ms;

  /* ---- GRID -------------------------------------------------------------- */
  --col: 12;
  --gutter: 24px;
  --measure: 68ch;       /* max reading width */
  --page-max: 1200px;
}

/* ============================================================================
   SEMANTIC ELEMENT DEFAULTS — opt in by wrapping content in .t1
   ============================================================================ */
.t1 {
  color: var(--ink-700);
  background: var(--paper-0);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: var(--fig-tabular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t1 h1, .t1 h2, .t1 h3, .t1 .display {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}
.t1 .display { font-size: var(--t-display); }
.t1 h1 { font-size: var(--t-h1); }
.t1 h2 { font-size: var(--t-h2); line-height: var(--lh-snug); }
.t1 h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
.t1 h4 {
  font-family: var(--font-text); font-weight: 600;
  font-size: var(--t-h4); line-height: var(--lh-snug);
  color: var(--ink-800); margin: 0;
}
.t1 p { margin: 0 0 1em; max-width: var(--measure); }
.t1 .lead { font-size: var(--t-lead); line-height: var(--lh-loose); color: var(--ink-600); }
.t1 small, .t1 .caption { font-size: var(--t-caption); color: var(--ink-500); }

/* Overline / eyebrow — the recurring premium label device */
.t1 .overline {
  font-family: var(--font-text);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-over);
  text-transform: uppercase;
  color: var(--brass);
}

/* Financial figures — the heart of the system */
.t1 .figure,
.t1 .money,
.t1 [data-figure] {
  font-family: var(--font-mono);
  font-feature-settings: var(--fig-tabular);
  letter-spacing: var(--tracking-figure);
  font-variant-numeric: tabular-nums lining-nums;
}
.t1 .money.pos { color: var(--pos); }
.t1 .money.neg { color: var(--neg); }

/* Hairline rule — preferred divider */
.t1 hr, .t1 .rule {
  border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0;
}
.t1 .rule-brass { border-top: 1px solid var(--brass); opacity: .6; }

.t1 a {
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.t1 a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }