/* ============================================================
   THAI.CONDOS — Redesign 2026 token layer (Path 2 Hybrid)
   Ported from redesign-2026-05-11/src/tokens.css.

   Phase 01 scope (DO NOT change without revisiting plan.md):
   - :root tokens, :lang(th) font swap, .t-* type utilities
   - .rd-* namespaced button/pill/input/rule utilities
   - NO html/body/a/button site-wide resets — those would
     clobber Resido's baseline and regress every restyled page.
   - Google Fonts loaded via <link> tags in partials/header.blade.php
     (the original @import is intentionally NOT copied here).

   Cache-bust by FILE RENAME only (e.g. v1 -> v2). Never `?v=`
   query strings — Theme::asset() silently drops query-string CSS.
   ============================================================ */

/* ── BILINGUAL FONT SWAP ───────────────────────────
   When the document is :lang(th), display switches to Trirong
   (Thai serif partner to Cormorant Garamond) and body to
   IBM Plex Sans Thai. Latin glyphs fall back to the Latin
   families further down the stack. */
:lang(th) {
  --rd-font-display: "Cormorant Garamond", "Trirong", Georgia, serif;
  --rd-font-body: "IBM Plex Sans Thai", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  /* P03 — re-alias legacy vars so Resido's body { font-family: var(--font-body) }
     picks up the Thai stack on /th/* pages. */
  --font-body:    "IBM Plex Sans Thai", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Trirong", "Cormorant Garamond", Georgia, serif;
}
[lang="th"], :lang(th) * {
  font-feature-settings: "ss01" on;
}

:root {
  /* Thai-flag palette — deep navy darks, never green */
  --color-bg-dark:         #131B3A;   /* Thai flag navy */
  --color-surface-dark:    #1B2547;
  --color-surface-raised:  #243154;
  --color-border-dark:     #34416B;

  --color-bg-light:        #F7F3EB;   /* warm ivory */
  --color-bg-white:        #FFFFFF;
  --color-bg-cream:        #FBF8F2;
  --color-border-light:    #E7DFCF;
  --color-border-line:     #D9CDB5;

  /* Primary — Thai flag navy, refined and dignified */
  --color-accent:          #1E2C5C;
  --color-accent-hover:    #15214A;
  --color-accent-soft:     #E4E8F2;
  --color-accent-dim:      rgba(30,44,92,0.10);

  /* Secondary — muted Thai red (chai / vermillion, never garish) */
  --color-warm:            #A8313C;
  --color-warm-hover:      #8C2530;
  --color-warm-soft:       #F0D9DC;

  /* Tertiary — dusty ivory (Thai flag white, warmed) */
  --color-clay:            #A8313C;

  /* Text */
  --color-text-primary-dark:    #FFFFFF;
  --color-text-secondary-dark:  #B6BFB9;
  --color-text-muted-dark:      #6B7770;

  --color-text-primary-light:   #1A1714;
  --color-text-secondary-light: #5B554D;
  --color-text-muted-light:     #8D8678;

  --color-fg1: var(--color-text-primary-light);
  --color-fg2: var(--color-text-secondary-light);
  --color-fg3: var(--color-text-muted-light);

  /* Semantic */
  --color-success:      #1E2C5C;
  --color-success-bg:   #E6EFEA;
  --color-warning:      #B5946A;
  --color-warning-bg:   #EFE4D0;
  --color-error:        #B85C3D;
  --color-error-bg:     #F4E2DA;

  /* Shadows — soft, editorial */
  --shadow-card-light:  0 1px 2px rgba(26,23,20,0.04), 0 4px 24px rgba(26,23,20,0.06);
  --shadow-card-dark:   0 4px 24px rgba(0,0,0,0.35);
  --shadow-sm:          0 1px 4px rgba(26,23,20,0.06);
  --shadow-lg:          0 16px 60px rgba(26,23,20,0.14);
  --shadow-hover:       0 2px 4px rgba(26,23,20,0.06), 0 14px 48px rgba(26,23,20,0.14);

  /* Radius */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-pill:  999px;

  /* Spacing — 8pt grid */
  --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: 120px;

  /* Type */
  --rd-font-display: 'Cormorant Garamond', 'Plus Jakarta Sans', Georgia, serif;
  --rd-font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rd-font-mono:    'JetBrains Mono', monospace;

  /* P03 (2026-05-24) — alias Resido's legacy --font-body / --font-heading
     into the redesign stack so plugin-driven views (account forms, settings
     sub-pages, blog comments, etc.) pick up the new fonts WITHOUT requiring
     blade edits on every view. style.css sets `body { font-family: var(--font-body) }`,
     and Resido's headings use `font-family: var(--font-heading)`. The inline
     <style> in header.blade.php declares both with defaults; the redesign
     overrides win because tokens.v2.css loads after that inline block. */
  --font-body:    var(--rd-font-body);
  --font-heading: var(--rd-font-display);
  /* --font-display alias (2026-05-26) — 25 rules across redesign-directory,
     redesign-shortcodes, redesign-agents and redesign-components reference
     var(--font-display, ...) for their h1/h2 chrome. Without this alias the
     custom property is undefined and CSS falls through to each rule's
     fallback chain, which varies file-to-file (Plus Jakarta in directory,
     Cormorant in shortcodes) and caused the /projects rd-di-title to
     render in the body font instead of the display serif. */
  --font-display: var(--rd-font-display);

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-7xl:  80px;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.14em;
}

/* ── TYPE UTILITIES ───────────────────────────────
   .t-* prefix keeps these out of collision range with
   Bootstrap / Resido / plugin selectors. Cormorant carries
   weight differently than Plus Jakarta — display uses 600/700
   and bumps size to compensate for serif x-height. */
.t-display {
  font-family: var(--rd-font-display);
  font-size: clamp(52px, 7vw, 92px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.t-h1 {
  font-family: var(--rd-font-display);
  font-size: var(--text-6xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}
.t-h2 {
  font-family: var(--rd-font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.005em;
}
.t-h3 {
  font-family: var(--rd-font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: 0;
}
.t-eyebrow {
  font-family: var(--rd-font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.t-mono {
  font-family: var(--rd-font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}
.t-em { font-style: italic; font-weight: var(--weight-semibold); }

/* ── BUTTONS (.rd-btn) ────────────────────────────
   Namespaced to .rd-btn to avoid clobbering Bootstrap .btn.
   Phase 02-05 will adopt .rd-btn explicitly. */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rd-font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
}
.rd-btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.rd-btn-primary:hover { background: var(--color-accent-hover); color: #fff; }

.rd-btn-dark {
  background: var(--color-bg-dark);
  color: #fff;
}
.rd-btn-dark:hover { background: #000; color: #fff; }

.rd-btn-outline {
  background: transparent;
  color: var(--color-text-primary-light);
  border: 1px solid var(--color-text-primary-light);
}
.rd-btn-outline:hover {
  background: var(--color-text-primary-light);
  color: #fff;
}
.rd-btn-outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
.rd-btn-outline-light:hover {
  background: #fff;
  color: var(--color-bg-dark);
  border-color: #fff;
}
.rd-btn-ghost {
  background: transparent;
  color: var(--color-text-primary-light);
}
.rd-btn-ghost:hover { background: rgba(0,0,0,0.05); }

.rd-btn-sm { padding: 9px 16px; font-size: var(--text-xs); }
.rd-btn-lg { padding: 16px 32px; font-size: var(--text-sm); }

/* ── PILLS (.rd-pill) ─────────────────────────────
   Namespaced; Resido / search filters use plain .pill in places. */
.rd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  background: var(--color-bg-cream);
  color: var(--color-text-primary-light);
  border: 1px solid var(--color-border-light);
  white-space: nowrap;
}
.rd-pill-emerald {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.rd-pill-brass {
  background: var(--color-warm);
  color: #fff;
  border-color: var(--color-warm);
}
.rd-pill-ghost-dark {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* ── INPUTS (.rd-input) ──────────────────────────── */
.rd-input {
  font-family: var(--rd-font-body);
  font-size: var(--text-sm);
  padding: 12px 14px;
  border: 1px solid var(--color-border-line);
  background: #fff;
  border-radius: var(--radius-md);
  color: var(--color-text-primary-light);
  outline: none;
  width: 100%;
}
.rd-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-dim); }

/* ── DECORATIVE RULES (.rd-rule) ─────────────────── */
.rd-rule {
  height: 1px;
  background: var(--color-border-line);
  border: 0;
  width: 100%;
}
.rd-rule-dark { background: rgba(255,255,255,0.12); }