/* =============================================================
   TRUTHDRAFT — Design Token System  (tokens.css  v1.0)
   Single source of truth. All other CSS files consume these.
   Import order: tokens.css → site.css / landing.css / style.css
   ============================================================= */

/* ------------------------------------------------------------------
   SELF-HOSTED FONTS
------------------------------------------------------------------ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/webfonts/fraunces-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces-Fallback';
  src: local('Georgia');
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/webfonts/archivo-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/webfonts/archivo-italic.woff2') format('woff2');
}

/* ================================================================
   ROOT — LIGHT MODE
   ================================================================ */
:root {

  /* ------------------------------------------------------------------
     TYPOGRAPHY
  ------------------------------------------------------------------ */
  --font-ui:      'Archivo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Fraunces', 'Fraunces-Fallback', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Letter-spacing companions */
  --ls-display: -0.057em;
  --ls-heading: -0.03em;
  --ls-h3:      -0.015em;
  --ls-eyebrow:  0.08em;

  /* ------------------------------------------------------------------
     COLOUR — BRAND PALETTE
  ------------------------------------------------------------------ */
  --color-clay:       #BD5B3A;        /* logo, graphics, large type only */
  --color-cta:        #9E4B2C;        /* button fill with cream text = 5.43:1 */
  --color-cta-hover:  #85391F;        /* darker hover state */
  --color-caution:    #B8863D;        /* FILL or bar only */
  --color-positive:   #4A7A5E;        /* FILL or bar only */

  /* Primary action aliases */
  --color-primary:       var(--color-cta);
  --color-primary-dark:  var(--color-cta-hover);
  --color-primary-light: #FDFBF7;
  --color-primary-glow:  rgba(158, 75, 44, 0.15);

  /* Surfaces */
  --color-ink:       #1C2B3A;
  --color-surface:   #FDFBF7;
  --color-bg:        #F7F3EC;
  --color-bg-alt:    #EFEBE1;
  --color-bg-subtle: #F5F0E6;

  /* Text scale */
  --color-text-main:  #1C2B3A;
  --color-text-body:  #1C2B3A;
  --color-text-muted: #6B6659;
  --color-text-dim:   #6B6659;
  --color-text-faint: #6B6659;

  /* Borders */
  --color-border:       rgba(28, 43, 58, 0.14);
  --color-border-card:  rgba(28, 43, 58, 0.14);
  --color-border-light: rgba(28, 43, 58, 0.08);
  --color-border-focus: var(--color-cta);

  /* Status */
  --color-success-bg:   #eaf3ed;
  --color-success-text: #2f563d;
  --color-warning-bg:   #faf2e3;
  --color-warning-text: #78521e;
  --color-danger-bg:    #fae9e6;
  --color-danger-text:  #8f281b;

  /* ------------------------------------------------------------------
     RADIUS
  ------------------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------
     SPACING (8-pt 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: 96px;

  /* Layout widths */
  --max-content: 1160px;
  --max-reading:  760px;
  --max-prose:    680px;

  /* ------------------------------------------------------------------
     SHADOWS
  ------------------------------------------------------------------ */
  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm:   0 4px 16px rgba(11, 18, 32, 0.04);
  --shadow-md:   0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 2px 8px -2px rgba(15, 23, 42, 0.03);
  --shadow-lg:   0 20px 50px rgba(20, 37, 61, 0.09);
  --shadow-card: var(--shadow-sm);
  --shadow-hover: 0 16px 36px -6px rgba(15, 23, 42, 0.08);

  /* ------------------------------------------------------------------
     TRANSITIONS
  ------------------------------------------------------------------ */
  --ease-std:  0.15s ease;
  --ease-move: 0.16s ease;
  --ease-slow: 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ------------------------------------------------------------------
     FOCUS
  ------------------------------------------------------------------ */
  --focus-ring:   3px solid var(--color-border-focus);
  --focus-offset: 3px;

  /* ------------------------------------------------------------------
     Z-INDEX SCALE
  ------------------------------------------------------------------ */
  --z-base:   1;
  --z-above: 10;
  --z-nav:   60;
  --z-modal: 200;

  /* ================================================================
     BACKWARD-COMPAT ALIASES
     These keep site.css, landing.css and style.css working without
     any rename churn.  Maps old var names → new tokens.
     ================================================================ */

  /* landing.css vars */
  --font:          var(--font-ui);
  --bg:            var(--color-bg);
  --bg-hero:       var(--color-bg);
  --surface:       var(--color-surface);
  --surface-alt:   var(--color-bg-subtle);
  --border:        var(--color-border);
  --border-card:   var(--color-border-card);
  --text-main:     var(--color-text-main);
  --text-body:     var(--color-text-body);
  --text-muted:    var(--color-text-dim);
  --primary:       var(--color-primary);
  --primary-dark:  var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --primary-glow:  transparent;
  --accent-purple: var(--color-primary);
  --radius-card:   var(--radius-xl);
  --radius-badge:  var(--radius-xs);

  /* site.css vars */
  --site-ink:        var(--color-ink);
  --site-blue:       var(--color-primary);
  --site-blue-hover: var(--color-primary-dark);
  --site-bg:         var(--color-bg);
  --site-line:       var(--color-border);
  --site-copy:       var(--color-text-muted);

  /* style.css (tool pages) vars */
  --bg-main:        var(--color-bg);
  --card-bg:        var(--color-surface);
  --card-subtle:    var(--color-bg);
  --card-elevated:  var(--color-bg-subtle);
  --border-color:   var(--color-border);
  --border-subtle:  var(--color-border-light);
  --border-focus:   var(--color-primary);
  --text-dim:       var(--color-text-faint);
  --primary-accent: var(--color-primary);
  --primary-hover:  var(--color-primary-dark);
  --success-bg:     var(--color-success-bg);
  --success-text:   var(--color-success-text);
  --warning-bg:     var(--color-warning-bg);
  --warning-text:   var(--color-warning-text);
  --danger-bg:      var(--color-danger-bg);
  --danger-text:    var(--color-danger-text);
  /* style.css used 20/12/8 for radius-lg/md/sm — remap */
  --radius-lg-compat: var(--radius-2xl);   /* 16px (was 20px — close enough) */
  --radius-md-compat: var(--radius-xl);    /* 12px */
  --radius-sm-compat: var(--radius-md);    /* 8px */
  --shadow-card-compat: var(--shadow-md);
}

/* ================================================================
   DARK MODE — overrides only
   ================================================================ */
html.dark {
  --color-primary:       #3b82f6;
  --color-primary-dark:  #2563eb;
  --color-primary-light: rgba(59, 130, 246, 0.12);
  --color-primary-glow:  rgba(59, 130, 246, 0.22);

  --color-ink:       #f8fafc;
  --color-surface:   #111827;
  --color-bg:        #090d16;
  --color-bg-alt:    #0f1523;
  --color-bg-subtle: #1a2234;

  --color-text-main:  #f8fafc;
  --color-text-body:  #c4cdd8;
  --color-text-muted: #94a3b8;
  --color-text-dim:   #7f8b9e;
  --color-text-faint: #64748b;

  --color-border:       #1f293d;
  --color-border-card:  #263244;
  --color-border-light: #192231;
  --color-border-focus: rgba(59, 130, 246, 0.5);

  --color-success-bg:   rgba(16, 185, 129, 0.16);
  --color-success-text: #34d399;
  --color-warning-bg:   rgba(245, 158, 11, 0.18);
  --color-warning-text: #fbbf24;
  --color-danger-bg:    rgba(239, 68, 68, 0.18);
  --color-danger-text:  #f87171;

  --shadow-sm:   0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 12px 36px -6px rgba(0, 0, 0, 0.45);
  --shadow-card: var(--shadow-sm);

  /* Cascade aliases into dark */
  --bg:            var(--color-bg);
  --bg-hero:       var(--color-bg);
  --surface:       var(--color-surface);
  --surface-alt:   var(--color-bg-subtle);
  --border:        var(--color-border);
  --border-card:   var(--color-border-card);
  --text-main:     var(--color-text-main);
  --text-body:     var(--color-text-body);
  --text-muted:    var(--color-text-dim);
  --primary:       var(--color-primary);
  --primary-dark:  var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --primary-glow:  var(--color-primary-glow);

  --site-ink:        var(--color-ink);
  --site-blue:       var(--color-primary);
  --site-blue-hover: var(--color-primary-dark);
  --site-bg:         var(--color-bg);
  --site-line:       var(--color-border);
  --site-copy:       var(--color-text-muted);

  --bg-main:        var(--color-bg);
  --card-bg:        var(--color-surface);
  --card-subtle:    var(--color-bg-alt);
  --card-elevated:  var(--color-bg-subtle);
  --border-color:   var(--color-border);
  --border-subtle:  var(--color-border-light);
  --border-focus:   var(--color-primary);
  --primary-accent: var(--color-primary);
  --primary-hover:  var(--color-primary-dark);
  --shadow-card-compat: var(--shadow-md);
}

/* ================================================================
   GLOBAL BASE RESET  (one canonical reset, loaded once)
   Any page that loads tokens.css gets these for free.
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-ui);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a      { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
img, svg { display: block; max-width: 100%; }
main   { display: block; }

/* ================================================================
   FOCUS RING  — one place to change for all interactive elements
   ================================================================ */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ================================================================
   CUSTOM SCROLLBAR  (webkit)
   ================================================================ */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
html.dark ::-webkit-scrollbar-thumb       { background: #334155; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ================================================================
   SCREEN-READER HELPERS
   ================================================================ */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Mobile Viewport Zoom Prevention: stop mobile browsers (iOS/Android) from auto-zooming on focus */
@media (max-width: 768px) {
  textarea, input, select {
    font-size: 16px !important;
  }
}