/* ============================================================
   Aurai Sensing — Colors & Type
   Drop in once at the document root. Reference vars everywhere.
   ============================================================ */

/* ---------- Web fonts (open-source substitutes) ---------- */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============== COLORS ============== */
  /* Brand & accent */
  --aurai-primary:           #1a472a;   /* dark forest green — matches logo */
  --aurai-primary-active:    #143d22;
  --aurai-primary-disabled:  #c8ddd0;
  --aurai-accent-teal:       #5db8a6;   /* terminal status, "active connection" dots */
  --aurai-accent-amber:      #e8a55a;   /* category badges, inline highlights */

  /* Surface — dark green scale (matches demo.html) */
  --aurai-canvas:               #0a1a0f;  /* page floor — deep forest */
  --aurai-surface-soft:         #0f1f13;  /* alternating sections */
  --aurai-surface-card:         #162616;  /* elevated cards */
  --aurai-surface-cream-strong: #1e3320;  /* strongest elevation */
  --aurai-surface-dark:         #060f07;  /* footer / explicit dark bands */
  --aurai-surface-dark-elevated:#0a1a0f;  /* canvas level within dark sections */
  --aurai-surface-dark-soft:    #0d1a10;  /* soft dark variant */

  /* Hairlines — green-tinted on dark */
  --aurai-hairline:      #1e3320;
  --aurai-hairline-soft: #162616;

  /* Text — light on dark */
  --aurai-ink:           #faf9f5;
  --aurai-body-strong:   #e8e4dc;
  --aurai-body:          #c4cec6;
  --aurai-muted:         #8a9e90;
  --aurai-muted-soft:    #6a8a72;
  --aurai-on-primary:    #ffffff;
  --aurai-on-dark:       #faf9f5;
  --aurai-on-dark-soft:  #8a9e90;

  /* Semantic */
  --aurai-success: #5db872;
  --aurai-warning: #d4a017;
  --aurai-error:   #c64545;

  /* ============== SEMANTIC COLOR ALIASES ============== */
  --bg:          var(--aurai-canvas);
  --bg-soft:     var(--aurai-surface-soft);
  --bg-card:     var(--aurai-surface-card);
  --bg-dark:     var(--aurai-surface-dark);
  --fg:          var(--aurai-ink);
  --fg-strong:   var(--aurai-body-strong);
  --fg-body:     var(--aurai-body);
  --fg-muted:    var(--aurai-muted);
  --fg-soft:     var(--aurai-muted-soft);
  --accent:      var(--aurai-primary);
  --border:      var(--aurai-hairline);

  /* ============== TYPE ============== */
  /* Stacks */
  --font-display: "Cormorant Garamond", "Tiempos Headline", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (size / line-height / tracking / weight) */
  --type-display-xl:  64px / 1.05  -1.5px;
  --type-display-lg:  48px / 1.1   -1px;
  --type-display-md:  36px / 1.15  -0.5px;
  --type-display-sm:  28px / 1.2   -0.3px;
  --type-title-lg:    22px / 1.3   0;
  --type-title-md:    18px / 1.4   0;
  --type-title-sm:    16px / 1.4   0;
  --type-body-md:     16px / 1.55  0;
  --type-body-sm:     14px / 1.55  0;
  --type-caption:     13px / 1.4   0;
  --type-caption-up:  12px / 1.4   1.5px;
  --type-code:        14px / 1.6   0;

  /* ============== SPACING ============== */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* ============== RADII ============== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ============== ELEVATION ============== */
  --shadow-soft: 0 1px 3px rgba(20,20,19,0.08);
}

/* ============================================================
   Base + semantic element styles
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}
h1 { font-size: 64px; line-height: 1.05; letter-spacing: -1.5px; }
h2 { font-size: 48px; line-height: 1.1;  letter-spacing: -1px; }
h3 { font-size: 36px; line-height: 1.15; letter-spacing: -0.5px; }
h4 { font-size: 28px; line-height: 1.2;  letter-spacing: -0.3px; }

.title-lg { font-family: var(--font-sans); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--fg); }
.title-md { font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--fg); }
.title-sm { font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--fg); }

p { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--fg-body); margin: 0; }
.body-sm { font-size: 14px; line-height: 1.55; color: var(--fg-body); }
.caption { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--fg-muted); }
.caption-up { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, pre {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
}