/* Location Notes v2 — system.css
   Variables, reset, typography. Extracted verbatim from LocationNotes_v2_MasterTokens.html.
   Font imports live in index.html (<link rel="preconnect"> + <link rel="stylesheet">) for parallel fetch. */


/* ============================================================
   1 · Minimal reset
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }


/* ============================================================
   2 · Design tokens
   ============================================================ */

:root {
  /* Surfaces */
  --bg: #FAF9F5;
  --surface-dark: #2C2C2A;
  --surface-dark-2: #444441;
  --surface-tooltip: #2C2C2A;
  --surface-skeleton: #EDEAE0;
  --surface-info: #EFEDE5;

  /* Ink */
  --ink: #2C2C2A;
  --ink-2: #5F5E5A;
  --ink-3: #8E8C84;
  --ink-on-dark: #FAF9F5;
  --ink-on-dark-2: #C7C5BD;
  --ink-placeholder: #8E8C84;
  --ink-disabled: #B4B2A9;

  /* Rules */
  --rule: #B4B2A9;
  --rule-soft: #E5E3DC;
  --rule-strong: #5F5E5A;

  /* Brand accent — terracotta */
  --accent: #B6492C;
  --accent-hover: #A03E25;
  --accent-active: #8B331C;
  --accent-disabled: #C7997F;
  --accent-on-dark: #D86B49;
  --accent-soft: #E5A78A;
  --accent-soft-bg: #FAEAE0;

  /* Status — on cream */
  --status-proceed: #5C7361;
  --status-wary: #B8862C;
  --status-nogo: #7A2D2D;

  /* Status — on dark */
  --proceed-on-dark: #A2B57A;
  --wary-on-dark: #D6A645;
  --nogo-on-dark: #C24545;

  /* Inline banners */
  --info-bg: #EFEDE5;
  --info-border: #B4B2A9;
  --info-text: #2C2C2A;
  --warning-bg: #F6EBCB;
  --warning-border: #B8862C;
  --warning-text: #6B4D17;
  --critical-bg: #F2DDDD;
  --critical-border: #7A2D2D;
  --critical-text: #5C1F1F;

  /* Form */
  --input-bg: #FAF9F5;
  --input-border: #B4B2A9;
  --input-border-hover: #8E8C84;
  --input-border-focus: #B6492C;
  --input-border-error: #7A2D2D;

  /* Spacing — 4px base */
  --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;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);

  /* Layout */
  --content-max-width: 720px;
}


/* ============================================================
   3 · Body defaults
   ============================================================ */

body {
  color: var(--ink);
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   4 · Typography utility classes
   ============================================================ */

.t-display-lg { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.t-display-md { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -0.005em; }
.t-display-sm { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; }
.t-verdict    { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
.t-prose      { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 400; line-height: 1.5; }

.t-body       { font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; }
.t-body-sm    { font-family: 'Outfit', system-ui, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.t-caption    { font-family: 'Outfit', system-ui, sans-serif; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }

.t-label-lg   { font-family: 'Outfit', system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.4; color: var(--ink-2); }
.t-label-md   { font-family: 'Outfit', system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.4; color: var(--accent); }
.t-label-sm   { font-family: 'Outfit', system-ui, sans-serif; font-size: 9px;  font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.4; color: var(--ink-3); }

.t-mono-md    { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; }
.t-mono-sm    { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; color: var(--ink-2); }