/* ============================================================
   สำนักงานกฎหมายยอดทิพย์ธรรม — Design Tokens
   Yod Thip Tham Law Office — Foundation layer
   ============================================================ */

:root {
  /* ---- Brand color tokens ---- */
  --navy:        #14243F; /* Primary Deep Navy   */
  --navy-700:    #1C3052; /* lighter navy surface */
  --navy-800:    #122039; /* mid chamber          */
  --navy-900:    #0D1829; /* deepest navy        */
  --navy-ink:    #070E1C; /* near-black navy — monumental chambers */
  --gold:        #B8902F; /* Accent Heritage Gold */
  --gold-soft:   #C8A24A; /* gold on dark, hover  */
  --gold-bright: #E7CB80; /* engraved-metal highlight */
  --gold-deep:   #836417; /* engraved-metal shadow   */
  --gold-text:   #785811; /* accessible gold for TEXT on light (≥4.5:1)  */
  --champagne:   #D9C58B; /* thin lines, soft hover */
  --champagne-12:#D9C58B1f;
  --platinum:    #C7CCD4; /* dividers, metal detail */
  --ivory:       #F6F4EF; /* main background      */
  --ivory-deep:  #EAE4D8; /* sunken ivory panels  */
  --ivory-warm:  #FCFBF7; /* lifted paper surface */
  --white:       #FFFFFF; /* card / surface       */
  --ink:         #15191F; /* primary text         */
  --slate:       #515A68; /* secondary text       */
  --slate-light: #767E8C; /* tertiary / captions  */

  /* ---- On-dark text ---- */
  --on-navy:        #F1EFE9;
  --on-navy-muted:  #B9C0CC;

  /* ---- Borders & lines ---- */
  --line:        #E4DFD4;          /* hairline on ivory */
  --line-strong: #D6CFC0;
  --line-gold:   rgba(184,144,47,.34);
  --line-navy:   rgba(20,36,63,.12);

  /* ---- Engraved metal, light & texture ---- */
  --grad-gold:    linear-gradient(140deg, var(--gold-bright) 0%, var(--gold) 48%, var(--gold-deep) 100%);
  --grad-gold-h:  linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-bright) 50%, var(--gold) 82%, transparent);
  --grad-navy:    linear-gradient(168deg, var(--navy-700) 0%, var(--navy) 38%, var(--navy-ink) 100%);
  --grad-ink:     linear-gradient(180deg, var(--navy-900) 0%, var(--navy-ink) 100%);
  --on-gold:      #2A2208; /* ink for text on gold fills (≥7:1) */
  --glow-gold:    0 18px 50px -20px rgba(184,144,47,.55);
  --vignette:     radial-gradient(125% 100% at 50% -12%, transparent 52%, rgba(5,11,22,.55) 100%);
  /* fine paper grain for ivory chambers — barely-there, adds material depth */
  --paper-tex:    radial-gradient(rgba(20,36,63,.018) 1px, transparent 1.4px);
  /* hairline gold engraving used as a divider rule */
  --rule-gold:    linear-gradient(90deg, transparent, var(--line-gold) 12%, var(--gold) 50%, var(--line-gold) 88%, transparent);

  /* ---- Type families ---- */
  --serif:  "Cormorant Garamond", "Trirong", Georgia, serif;     /* display / headings */
  --serif-th: "Trirong", "Cormorant Garamond", serif;
  --sans:   "Inter", "IBM Plex Sans Thai", system-ui, sans-serif; /* body */
  --sans-th:"IBM Plex Sans Thai", "Inter", system-ui, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --fs-mega:    clamp(3rem, 1.4rem + 6.2vw, 5.4rem);   /* hero display ceiling ~86px */
  --fs-display: clamp(2.7rem, 1.5rem + 4.8vw, 4.9rem);
  --fs-h1:      clamp(2.2rem, 1.45rem + 2.9vw, 3.6rem);
  --fs-h2:      clamp(1.8rem, 1.25rem + 2vw, 2.85rem);
  --fs-h3:      clamp(1.34rem, 1.05rem + 1vw, 1.8rem);
  --fs-lead:    clamp(1.085rem, 1rem + .4vw, 1.32rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.76rem;

  /* ---- Display tracking (Latin display only; Thai stays ~0) ---- */
  --track-display: -0.022em;
  --track-tight:   -0.012em;

  /* ---- 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; --s-10: 128px;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadows (soft, premium) ---- */
  --sh-sm: 0 1px 2px rgba(20,36,63,.06), 0 1px 3px rgba(20,36,63,.05);
  --sh-md: 0 8px 22px -10px rgba(20,36,63,.20), 0 2px 6px rgba(20,36,63,.06);
  --sh-lg: 0 30px 60px -26px rgba(13,24,41,.40), 0 10px 24px -14px rgba(13,24,41,.18);
  --sh-xl: 0 50px 96px -40px rgba(7,14,28,.58), 0 18px 44px -26px rgba(13,24,41,.30);
  --sh-gold: 0 18px 44px -18px rgba(184,144,47,.50);

  /* ---- Layout ---- */
  --maxw: 1240px;
  --maxw-text: 70ch;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 76px;
  --topbar-h: 40px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-quint: cubic-bezier(.22,1,.36,1);

  /* ---- Semantic z-index scale ---- */
  --z-drop: 90;
  --z-sticky: 80;
  --z-drawer: 96;
  --z-modal: 120;
  --z-toast: 200;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans-th);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--ink);
  /* barely-there paper grain over ivory for material depth */
  background: var(--paper-tex) 0 0 / 23px 23px, var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 { font-family: var(--serif-th); font-weight: 600; line-height: 1.16; color: var(--navy); letter-spacing: 0; text-wrap: balance; }
:lang(en) h1, :lang(en) h2, :lang(en) h3 { font-family: var(--serif); letter-spacing: var(--track-tight); }

::selection { background: var(--gold); color: var(--on-gold); }

/* Focus ring for accessibility */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* ============================================================
   Reusable primitives
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--sans-th);
  font-size: var(--fs-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
/* deliberate brand kicker: a struck-gold rule capped by a fine diamond */
.eyebrow::before {
  content: "";
  flex: none;
  width: 30px; height: 2px; border-radius: 2px;
  background: var(--grad-gold-h);
}
.eyebrow.center::after {
  content: "";
  flex: none;
  width: 30px; height: 2px; border-radius: 2px;
  background: var(--grad-gold-h);
}

.section { padding-block: clamp(64px, 8.5vw, 132px); }
.section-head { max-width: 62ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin-top: 18px; }
.section-head p { color: var(--slate); font-size: var(--fs-lead); margin-top: 18px; text-wrap: pretty; }
.section-head .eyebrow { margin-bottom: 4px; }

.lead { font-size: var(--fs-lead); color: var(--slate); line-height: 1.75; text-wrap: pretty; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans-th); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .01em;
  padding: 15px 28px; min-height: 52px;
  border-radius: var(--r-pill);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad-gold); color: var(--on-gold); box-shadow: var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.42); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-navy { background: var(--navy); color: var(--on-navy); }
.btn-navy:hover { transform: translateY(-2px); background: var(--navy-700); }
.btn-outline { border: 1.5px solid var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--on-navy); transform: translateY(-2px); }
.btn-ghost-gold { border: 1.5px solid var(--gold); color: var(--gold); }
.btn-ghost-gold:hover { background: var(--gold); color: var(--on-gold); transform: translateY(-2px); }
.btn-on-dark { border: 1.5px solid rgba(255,255,255,.65); color: #fff; background: rgba(255,255,255,.06); }
.btn-on-dark:hover { border-color: var(--gold); color: var(--white); background: rgba(184,144,47,.18); transform: translateY(-2px); }

/* Card */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--line-gold); }

/* gold divider flourish */
.flourish { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); }
.flourish::before, .flourish::after { content: ""; height: 1px; width: 40px; background: linear-gradient(90deg, transparent, var(--gold)); }
.flourish::after { background: linear-gradient(90deg, var(--gold), transparent); }
.flourish .diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* utility */
.u-navy { background: var(--navy); color: var(--on-navy); }
.u-ivory-deep { background: var(--ivory-deep); }
/* Reveal animation — visible by default; JS hides ONLY below-the-fold
   elements (off-screen, no flash) and animates them in on scroll. If JS
   never runs, nothing is hidden, so content can never get stuck invisible. */
.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.reveal.pending { opacity: 0; transform: translateY(22px); filter: blur(7px); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.pending, .reveal.in { transition: none !important; filter: none !important; transform: none !important; opacity: 1 !important; } }
[data-stagger] > * { transition-delay: var(--d, 0ms); }