/* ==========================================================================
   LatSpace Design Tokens
   Colors + Type + Semantic vars
   ========================================================================== */

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

:root {
  /* ---- BRAND PALETTE (primary) ---- */
  --latspace-dark:    #074D47; /* primary brand, headers, CTAs */
  --latspace-medium:  #22867C; /* interactive states, accents */
  --latspace-light:   #89E4DA; /* highlights, emphasis text on dark */

  /* ---- NEUTRALS ---- */
  --white:     #FFFFFF;
  --black:     #000000;
  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-800:  #1F2937;
  --gray-900:  #111827;

  /* ---- SEMANTIC COLORS ---- */
  --bg-primary:    var(--white);
  --bg-secondary:  var(--gray-50);
  --bg-inverse:    var(--latspace-dark);
  --bg-black:      var(--black);

  --fg-primary:    var(--black);      /* body text on light */
  --fg-secondary:  var(--gray-600);   /* muted text on light */
  --fg-tertiary:   var(--gray-500);   /* captions on light */
  --fg-inverse:    var(--white);      /* text on dark */
  --fg-inverse-muted: var(--gray-300);/* muted text on dark */
  --fg-accent:     var(--latspace-dark);
  --fg-accent-alt: var(--latspace-medium);
  --fg-highlight:  var(--latspace-light); /* use on DARK backgrounds only */

  --border-default: var(--gray-200);
  --border-strong:  var(--black);
  --border-hover:   var(--latspace-dark);
  --border-accent:  var(--latspace-medium);

  /* Status — spare, synthesized from palette since the brand has none */
  --status-success: #22867C; /* reuse latspace-medium */
  --status-warning: #B8860B;
  --status-error:   #A23B3B;
  --status-info:    #074D47;

  /* ---- TYPOGRAPHY FAMILIES ---- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'IBM Plex Sans', system-ui, sans-serif;

  /* ---- TYPE SCALE (px, clamped for fluidity) ---- */
  --fs-hero:       clamp(36px, 7vw, 72px);
  --fs-section:    clamp(28px, 4vw, 48px);
  --fs-subsection: clamp(18px, 2.5vw, 24px);
  --fs-body:       clamp(16px, 1.5vw, 18px);
  --fs-small:      14px;
  --fs-caption:    12px;

  /* Fixed sizes */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-48: 48px;
  --fs-72: 72px;
  --fs-96: 96px;

  /* ---- WEIGHTS ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- LINE HEIGHTS ---- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  /* ---- LETTER SPACING ---- */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-widest:  0.1em;

  /* ---- SPACING (4 / 8px rhythm) ---- */
  --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;
  --space-32: 128px;

  /* ---- LAYOUT ---- */
  --container-max: 1400px;
  --container-pad: 40px;
  --container-pad-lg: 80px;
  --container-pad-sm: 16px;

  /* ---- BORDERS ---- */
  --border-width: 1px;
  --border-width-thick: 4px;
  --radius: 0;              /* SHARP EDGES ONLY — never round */
  --radius-pill: 0;

  /* ---- SHADOWS (used sparingly; only on hover/elevated states) ---- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(7, 77, 71, 0.04);
  --shadow-md:  0 12px 28px rgba(7, 77, 71, 0.06);
  --shadow-lg:  0 18px 40px rgba(7, 77, 71, 0.08);
  --shadow-xl:  0 20px 45px rgba(15, 23, 42, 0.08);

  /* ---- MOTION ---- */
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --dur-slower: 500ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES (direct use: class="h1", class="body", etc.)
   ========================================================================== */

.hero, .text-hero {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.h1, .text-section {
  font-family: var(--font-sans);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

.h2, .text-subsection {
  font-family: var(--font-sans);
  font-size: var(--fs-subsection);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.body, .text-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

.small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

.caption, .text-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.data, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  font-feature-settings: "tnum" 1;
}

/* Base reset for HTML elements */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
p { margin: 0; }
button, input, select, textarea { font-family: inherit; }