/* ============================================================
   everdate · design tokens
   The source of truth for color, type, spacing, radii, shadows.
   Reference these from any product (app, web, deck, email, etc).
   ============================================================ */

@font-face {
  font-family: "Etna";
  src: url("./fonts/etna-free-font.otf") format("opentype");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* ---------- color: ink (text + buttons) ---------- */
  --ink: #16130f;         /* primary text, ink buttons, active states */
  --ink-soft: #2a2622;    /* secondary body text, slightly relaxed */
  --muted: #9a978f;       /* labels, captions, meta */
  --paper: #f4f5f2;       /* text-on-ink, screen highlight */

  /* ---------- color: surface (frosted glass) ---------- */
  --card: rgba(255, 255, 255, 0.66);     /* frosted card fill */
  --card-line: rgba(255, 255, 255, 0.8); /* frosted card hairline */
  --screen-top: #f4f5f2;                 /* page bg, top */
  --screen-bot: #e6e8e3;                 /* page bg, bottom */

  /* ---------- type ---------- */
  --font: "Hanken Grotesk", system-ui, sans-serif;
  --display: "Etna", "Hanken Grotesk", system-ui, sans-serif;

  /* type scale (display) */
  --t-display-xl: 36px;   /* hero / discover h-title */
  --t-display-lg: 30px;   /* screen titles, profile name */
  --t-display-md: 23px;   /* tile captions */
  --t-display-sm: 19px;   /* card titles */
  --t-display-xs: 17px;   /* small card titles */

  /* type scale (body) */
  --t-body-lg: 18px;      /* bio, large body */
  --t-body-md: 16px;      /* default body */
  --t-body-sm: 14px;      /* labels, chips */
  --t-body-xs: 12.5px;    /* meta, captions */

  /* ---------- spacing scale ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;

  /* ---------- radii ---------- */
  --r-sm: 12px;           /* chips, tags */
  --r-md: 18px;           /* inputs, small cards */
  --r-lg: 22px;           /* default card */
  --r-xl: 28px;           /* big cards / sheets */
  --r-pill: 999px;        /* pills, ctas */

  /* ---------- shadows ---------- */
  --sh-card:   0 4px 14px rgba(40, 34, 26, 0.06);
  --sh-soft:   0 3px 10px rgba(40, 34, 26, 0.05);
  --sh-floating: 0 6px 18px rgba(40, 34, 26, 0.08);
  --sh-ink:    0 8px 18px rgba(20, 14, 5, 0.22);
  --sh-tab:    0 -6px 20px rgba(40, 34, 26, 0.05),
               0 -1px 0 rgba(255, 255, 255, 0.8) inset;

  /* ---------- screen frame (for app artboards) ---------- */
  --frame-w: 390px;
  --frame-h: 844px;
}

/* ============================================================
   base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* lucide replaces <i data-lucide> with svg; keep block layout */
[data-lucide] { display: inline-flex; line-height: 0; }