/* =========================
   Tokens
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors */
  --bg: #ffffff;
  --fg: #111111;
  --fg-muted: #666666;
  --accent: #6366f1; /* Indigo */
  --accent-glow: rgba(99, 102, 241, 0.15);
  
  --surface-1: #f9fafb;
  --surface-2: #f3f4f6;
  --border: #e5e7eb;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  
  --fs-1: 12px;
  --fs-2: 14px;
  --fs-3: 16px;
  --fs-4: 20px;
  --fs-5: 24px;
  --fs-6: 32px;
  --fs-7: 48px;
  --fs-8: 64px;

  --fw-3: 300;
  --fw-4: 400;
  --fw-5: 500;
  --fw-6: 600;
  --fw-7: 700;
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-8: 64px;
  
  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}



/* =========================
   Layout – Display
   ========================= */

.block { display: block; }
.inline { display: inline; }
.inline-b { display: inline-block; }
.none { display: none; }

/* =========================
   Flex (display + direction)
   ========================= */

.flex-r { display: flex; flex-direction: row; }
.flex-c { display: flex; flex-direction: column; }

/* =========================
   Flex – Alignment
   ========================= */

.ai-c { align-items: center; }
.ai-s { align-items: flex-start; }
.ai-e { align-items: flex-end; }

.jc-c { justify-content: center; }
.jc-s { justify-content: flex-start; }
.jc-e { justify-content: flex-end; }
.jc-b { justify-content: space-between; }
.jc-a { justify-content: space-around; }

/* =========================
   Flex – Wrap
   ========================= */

.wrap { flex-wrap: wrap; }
.nowrap { flex-wrap: nowrap; }

/* =========================
   Sizing
   ========================= */

.w-vw { width: 100vw; }
.h-vh { height: 100vh; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.max-w { max-width: 100%; }

/* =========================
   Position
   ========================= */

.rel { position: relative; }
.abs { position: absolute; }
.fix { position: fixed; }

.t-0 { top: 0; }
.l-0 { left: 0; }
.r-0 { right: 0; }
.b-0 { bottom: 0; }

/* =========================
   Text
   ========================= */

.tl { text-align: left; }
.tc { text-align: center; }
.tr { text-align: right; }

.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }

/* =========================
   Overflow
   ========================= */

.oh { overflow: hidden; }
.oa { overflow: auto; }

/* =========================
   Cursor / UX
   ========================= */

.ptr { cursor: pointer; }
.def { cursor: default; }

/* =========================
   Visibility
   ========================= */

.hidden { visibility: hidden; }
.visible { visibility: visible; }

/* =========================
   Font Size
   ========================= */

.fs-1 { font-size: var(--fs-1); }
.fs-2 { font-size: var(--fs-2); }
.fs-3 { font-size: var(--fs-3); }
.fs-4 { font-size: var(--fs-4); }
.fs-5 { font-size: var(--fs-5); }

/* =========================
   Font Weight
   ========================= */

.fw-1 { font-weight: var(--fw-1); }
.fw-2 { font-weight: var(--fw-2); }
.fw-3 { font-weight: var(--fw-3); }
.fw-4 { font-weight: var(--fw-4); }
.fw-5 { font-weight: var(--fw-5); }


body {
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}