/* ============================================================
   LIVING STONES CONFERENCE — Design Tokens
   Theme: Prophetic Midnight + Sanctuary Gold fonts
   ============================================================ */

/* ---- Font imports ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  /* Backgrounds */
  --bg:        #080B10;
  --bg-2:      #0D1018;
  --bg-3:      #111620;

  /* Surfaces */
  --surface:   #121820;
  --surface-2: #192030;
  --surface-3: #202840;

  /* Borders */
  --border:        rgba(232, 146, 42, 0.10);
  --border-strong: rgba(232, 146, 42, 0.22);

  /* Text */
  --text-1: #F0F4F8;
  --text-2: #A8B4C0;
  --text-3: #6A7A88;
  --text-4: #44545E;

  /* Primary accent — Amber */
  --gold:            #E8922A;
  --gold-strong:     #F5B050;
  --gold-subtle:     #C47A20;
  --gold-bg:         rgba(232, 146, 42, 0.08);
  --gold-bg-strong:  rgba(232, 146, 42, 0.18);

  /* Semantic colours */
  --cyan:       #67E8F9;
  --cyan-bg:    rgba(103, 232, 249, 0.12);
  --purple:     #A78BFA;
  --purple-bg:  rgba(167, 139, 250, 0.12);
  --orange:     #FB923C;
  --orange-bg:  rgba(251, 146, 60, 0.12);
  --red:        #F87171;
  --red-bg:     rgba(248, 113, 113, 0.12);
  --green:      #34D399;
  --green-bg:   rgba(52, 211, 153, 0.12);
  --teal:       #5EEAD4;
  --teal-bg:    rgba(94, 234, 212, 0.12);

  /* Shadows */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.6);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --trans: 0.18s ease;
}

/* Light theme (toggled via data-theme="light") */
[data-theme="light"] {
  --bg:        #F5EED8;
  --bg-2:      #EDE4C4;
  --bg-3:      #E5D9B0;
  --surface:   #FFFFFF;
  --surface-2: #FAF4E4;
  --surface-3: #F0E8CC;
  --border:        rgba(180, 120, 20, 0.14);
  --border-strong: rgba(180, 120, 20, 0.28);
  --text-1: #1A140C;
  --text-2: #5A4E3A;
  --text-3: #8A7E64;
  --text-4: #B5A88C;
  --gold:           #B87020;
  --gold-strong:    #9A5C10;
  --gold-subtle:    #D4A050;
  --gold-bg:        rgba(184, 112, 32, 0.08);
  --gold-bg-strong: rgba(184, 112, 32, 0.16);
  --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.16);
}

/* ---- Base reset ---- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-strong); }

::selection {
  background: var(--gold-bg-strong);
  color: var(--text-1);
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-subtle); }