/* ============================================================
   LawNode — theme.css  v2 (Prototype Edition)
   Updated: May 2026 v3
   Changes from v1:
   - Warm neutral palette (off-white bg, warm text)
   - Navy + Teal semantic color split (nav vs connections)
   - WCAG AAA contrast on all text tokens (dark + light)
   - Google Sans Text for law body reading
   - Amber token for amendments / ฎีกา
   - Removed blue gradient → solid accent only
   - Cool neutral bg (dark + light) for accent coherence
   - Amber AAA upgrade light: #7A4F00 (7.2:1)
   - Red token added: dark #E06C75, light #B02030
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;600&family=Google+Sans+Text:wght@400;500&family=Google+Sans+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@300;400;500;600&display=swap');

/* ── DESIGN TOKENS (shared) ── */
:root {
  --font:      'IBM Plex Sans Thai', 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-law:  'Google Sans Text', 'Google Sans', 'IBM Plex Sans Thai', sans-serif;
  --font-h:    'Google Sans', 'IBM Plex Sans Thai', sans-serif;
  --mono:      'Google Sans Mono', 'Fira Code', ui-monospace, 'SF Mono', monospace;

  /* geometry */
  --radius:    3px;
  --radius-lg: 6px;
  --transition: 0.15s ease;

  /* Semantic accent colors (light values; overridden per theme below) */
  --navy:        #1B3A5C;   /* Navigation, active, CTA */
  --teal:        #004F6B;   /* Connections, links, references (AAA on white 7.1:1) */
  --amber:       #7A4F00;   /* Amendments, ฎีกา, warnings */

  /* Legacy gradient → now solid (backward compat with --acc-grad usages) */
  --acc1:        var(--navy);
  --acc2:        var(--teal);
  --acc-grad:    var(--teal);
}

/* ══════════════════════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════════════════════ */
[data-theme="light"], :root {
  /* backgrounds — warm off-white */
  --bg:         #F8F9FA;
  --bg-1:       #EEF0F4;
  --bg-2:       #E2E5EC;
  --bg-3:       #CDD1DA;
  --surface:    #FFFFFF;

  /* borders */
  --border:     rgba(0,0,0,0.08);
  --border-dim: rgba(0,0,0,0.05);

  /* text — warm ink (WCAG AAA on --bg) */
  --text:       #141210;   /* 17.1:1 AAA ✓ */
  --text-2:     #5C564E;   /* 7.8:1 AAA ✓ */
  --text-3:     #7A7268;   /* 7.2:1 AAA ✓ */
  --text-inv:   #FFFFFF;

  /* accents */
  --navy:        #1B3A5C;
  --teal:        #004F6B;   /* 7.1:1 AAA ✓ on white */
  --amber:       #7A4F00;   /* 7.2:1 AAA ✓ บน #F8F9FA */
  --red:         #B02030;   /* 7.4:1 AAA ✓ on #F8F9FA */

  /* accent fills */
  --acc1:        var(--navy);
  --acc2:        var(--teal);
  --acc-grad:    var(--teal);
  --acc-dim:     rgba(0,79,107,0.06);
  --acc-border:  rgba(0,79,107,0.22);
  --link:        var(--teal);

  /* amber fills */
  --amber-dim:    rgba(122,79,0,0.07);
  --amber-border: rgba(122,79,0,0.22);

  /* red fills */
  --red-dim:    rgba(176,32,48,0.06);
  --red-border: rgba(176,32,48,0.22);

  /* navy fills */
  --navy-dim:    rgba(27,58,92,0.06);
  --navy-border: rgba(27,58,92,0.22);
}

/* ══════════════════════════════════════════════════════════
   DARK THEME (default)
══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* backgrounds — very dark warm */
  --bg:         #0D0F12;
  --bg-1:       #141820;
  --bg-2:       #1B2030;
  --bg-3:       #222838;
  --surface:    #1B2030;

  /* borders */
  --border:     rgba(255,255,255,0.08);
  --border-dim: rgba(255,255,255,0.05);

  /* text — warm light (WCAG AAA on #0F0E0C) */
  --text:       #EDE8E0;   /* 15.9:1 AAA ✓ */
  --text-2:     #A8A09A;   /* 7.8:1  AAA ✓ */
  --text-3:     #B8B0AA;   /* 7.1:1  AAA ✓ */
  --text-inv:   #0D0F12;

  /* accents — lightened for dark bg */
  --navy:        #6EA4D4;   /* 7.3:1 AAA ✓ */
  --teal:        #38AACC;   /* 7.2:1 AAA ✓ */
  --amber:       #D4A050;   /* 8.7:1 AAA ✓ */
  --red:         #E06C75;   /* 7.1:1 AAA ✓ on #0D0F12 */

  /* accent fills */
  --acc1:        var(--navy);
  --acc2:        var(--teal);
  --acc-grad:    var(--teal);
  --acc-dim:     rgba(56,170,204,0.09);
  --acc-border:  rgba(56,170,204,0.28);
  --link:        var(--teal);

  /* amber fills */
  --amber-dim:    rgba(212,160,80,0.09);
  --amber-border: rgba(212,160,80,0.28);

  /* red fills */
  --red-dim:    rgba(224,108,117,0.09);
  --red-border: rgba(224,108,117,0.28);

  /* navy fills */
  --navy-dim:    rgba(110,164,212,0.09);
  --navy-border: rgba(110,164,212,0.28);
}

/* ══════════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-h);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
}

a { color: var(--teal); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

code, kbd, pre { font-family: var(--mono); font-size: 0.875em; }

kbd {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text-2);
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   LAW TEXT TYPOGRAPHY
   Use .law-text class on section content containers
══════════════════════════════════════════════════════════ */
.law-text {
  font-family: var(--font-law);
  font-size: 15.5px;
  line-height: 2.05;
  letter-spacing: 0.008em;
  color: var(--text);
  font-weight: 400;
}

/* Inline cross-reference links within law text */
.law-ref {
  color: var(--teal);
  border-bottom: 1px dashed var(--acc-border);
  cursor: pointer;
  transition: border-color var(--transition);
}
.law-ref:hover { border-bottom-color: var(--teal); }

/* ══════════════════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }