/* Bloom — gestational diabetes tracker design tokens */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Surfaces — warm cream */
  --bg:          oklch(0.974 0.012 80);
  --bg-tint:    oklch(0.955 0.018 78);
  --card:       #ffffff;
  --card-2:     oklch(0.985 0.006 80);
  --line:       oklch(0.90 0.010 80);
  --line-soft:  oklch(0.94 0.010 80);

  /* Ink */
  --ink:        oklch(0.22 0.025 255);
  --ink-2:      oklch(0.42 0.020 255);
  --ink-3:      oklch(0.60 0.015 255);
  --ink-4:      oklch(0.78 0.012 255);

  /* Semantic — gentle, share chroma */
  --safe:       oklch(0.62 0.10 150);   /* sage */
  --safe-bg:    oklch(0.94 0.045 150);
  --warn:       oklch(0.74 0.11 75);    /* amber */
  --warn-bg:    oklch(0.95 0.06 80);
  --spike:      oklch(0.66 0.13 28);    /* coral */
  --spike-bg:   oklch(0.94 0.05 30);

  /* Primary brand — slate ink-blue */
  --primary:    oklch(0.38 0.07 255);
  --primary-2:  oklch(0.50 0.08 255);

  /* Type */
  --sans: 'Geist', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
}

* { box-sizing: border-box; }

.phone-root {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  min-height: 100%;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: var(--serif); letter-spacing: -0.005em; font-weight: 400; }
.mono  { font-family: var(--mono); letter-spacing: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.tabular { font-variant-numeric: tabular-nums; }

/* shared card */
.bcard {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
}

/* striped placeholder used for any imagery slot */
.placeholder-img {
  background:
    repeating-linear-gradient(135deg,
      oklch(0.93 0.015 80) 0 8px,
      oklch(0.90 0.018 80) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em;
}

/* tiny chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--bg-tint); color: var(--ink-2);
  border: 1px solid var(--line-soft);
}
.chip.safe  { background: var(--safe-bg);  color: oklch(0.36 0.10 150); border-color: transparent; }
.chip.warn  { background: var(--warn-bg);  color: oklch(0.42 0.09 70);  border-color: transparent; }
.chip.spike { background: var(--spike-bg); color: oklch(0.44 0.13 28);  border-color: transparent; }
.chip.dark  { background: var(--ink); color: oklch(0.94 0.02 80); border-color: transparent; }

/* dot */
.dot {
  width: 8px; height: 8px; border-radius: 999px; display: inline-block;
}

/* hide scrollbars in phone scroll regions */
.phone-root ::-webkit-scrollbar { display: none; }