/* AI-MER static export — design tokens, utilities */
:root {
  --radius: 0.5rem;
  --background: oklch(0.985 0.003 240);
  --foreground: oklch(0.18 0.02 250);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.005 240);
  --hairline: oklch(0.9 0.008 240);
  --card: oklch(1 0 0);
  --primary: oklch(0.62 0.18 250);
  --primary-foreground: oklch(0.99 0 0);
  --muted-foreground: oklch(0.5 0.02 250);
  --ring: oklch(0.62 0.18 250);
}
.dark {
  --background: oklch(0.16 0.015 255);
  --foreground: oklch(0.97 0.005 240);
  --surface: oklch(0.205 0.018 255);
  --surface-2: oklch(0.245 0.02 255);
  --hairline: oklch(0.32 0.02 255);
  --card: oklch(0.205 0.018 255);
  --primary: oklch(0.72 0.17 245);
  --primary-foreground: oklch(0.13 0.02 255);
  --muted-foreground: oklch(0.7 0.015 250);
  --ring: oklch(0.72 0.17 245);
}

* { border-color: var(--hairline); }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
::selection { background: color-mix(in oklab, var(--primary) 35%, transparent); color: var(--foreground); }

/* Tailwind config bridge — semantic class names mapped to tokens */
.bg-background { background-color: var(--background) !important; }
.bg-surface { background-color: var(--surface) !important; }
.bg-surface-2 { background-color: var(--surface-2) !important; }
.bg-surface-2\/30 { background-color: color-mix(in oklab, var(--surface-2) 30%, transparent) !important; }
.bg-surface-2\/40 { background-color: color-mix(in oklab, var(--surface-2) 40%, transparent) !important; }
.bg-card { background-color: var(--card) !important; }
.bg-primary { background-color: var(--primary) !important; }
.hover\:bg-surface-2:hover { background-color: var(--surface-2) !important; }
.bg-background\/75 { background-color: color-mix(in oklab, var(--background) 75%, transparent) !important; }
.bg-background\/85 { background-color: color-mix(in oklab, var(--background) 85%, transparent) !important; }

.text-foreground { color: var(--foreground) !important; }
.text-foreground\/80 { color: color-mix(in oklab, var(--foreground) 80%, transparent) !important; }
.text-muted-foreground { color: var(--muted-foreground) !important; }
.text-primary { color: var(--primary) !important; }
.text-primary-foreground { color: var(--primary-foreground) !important; }
.hover\:text-foreground:hover { color: var(--foreground) !important; }
.hover\:text-primary:hover { color: var(--primary) !important; }

.border-hairline { border-color: var(--hairline) !important; }
.bg-hairline { background-color: var(--hairline) !important; }
.hover\:border-primary\/40:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent) !important; }
.border-primary { border-color: var(--primary) !important; }

.focus\:ring-ring:focus { --tw-ring-color: var(--ring) !important; }

/* utility: hairline border */
.hairline { border: 1px solid var(--hairline); }

/* monospace */
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; font-feature-settings: "zero", "ss01"; letter-spacing: -0.01em; }

/* grid bg */
.grid-bg {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--hairline) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--hairline) 60%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Calendar cell helpers */
.cal-cell { min-height: 90px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 0.5rem; }
@media (min-width: 640px) { .cal-cell { min-height: 110px; padding: 0.625rem; } }
.cal-cell.empty { background: color-mix(in oklab, var(--surface-2) 30%, transparent); }
.cal-cell:nth-child(7n) { border-right: 0; }

.dot { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 9999px; flex-shrink: 0; }
.dot.primary { background: var(--primary); }
.dot.emerald { background: #10b981; }
.dot.amber { background: #f59e0b; }
.dot.sky { background: #0ea5e9; }
.size-2.primary { background: var(--primary); }
.size-2.emerald { background: #10b981; }
.size-2.amber { background: #f59e0b; }
.size-2.sky { background: #0ea5e9; }

/* Animated pulse dot already covered by tailwind cdn */