/* ============================================================
 * AyniHealth Design System — Colors & Typography
 * Source of truth extracted from ayni-health/src/app/globals.css
 * ============================================================ */

@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Core color tokens (light mode) ─────────────────────── */
  --background: oklch(1 0 0);                            /* #ffffff */
  --foreground: oklch(0.141 0.005 285.823);              /* near-black, cool */
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);

  /* Ayni Purple — THE brand color. Everywhere. */
  --primary: oklch(0.61 0.22 293);                       /* ≈ #9370db — Ayni Purple */
  --primary-foreground: oklch(0.969 0.016 293.756);

  --secondary: oklch(0.967 0.001 286.375);               /* neutral tint for chips/chrome */
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);              /* warm red */
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);

  /* Chart ramp — tinted purples from light to deep */
  --chart-1: oklch(0.811 0.111 293.571);
  --chart-2: oklch(0.606 0.25 292.717);
  --chart-3: oklch(0.541 0.281 293.009);
  --chart-4: oklch(0.491 0.27 292.581);
  --chart-5: oklch(0.432 0.232 292.759);

  /* Sidebar chrome */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.541 0.281 293.009);
  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);

  /* Logo gradient (brand mark only; not used in UI chrome) */
  --brand-gradient-from: #1539ba;   /* deep blue */
  --brand-gradient-to:   #b04cc3;   /* magenta purple */
  --brand-gradient: linear-gradient(135deg, var(--brand-gradient-from), var(--brand-gradient-to));

  /* Radius scale */
  --radius: 0.5rem;                 /* base = 8px */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  /* Shadow scale (shadcn-style, kept lightweight) */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  /* Ring (subtle outer ring that cards use instead of a heavy border) */
  --ring-card: 0 0 0 1px oklch(0.141 0.005 285.823 / 0.10);

  /* Type tokens */
  --font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — app prefers a narrow scale, semibold for titles */
  --text-xs:   0.75rem;  /* 12 */
  --text-sm:   0.875rem; /* 14 */
  --text-base: 1rem;     /* 16 */
  --text-lg:   1.125rem; /* 18 */
  --text-xl:   1.25rem;  /* 20 */
  --text-2xl:  1.5rem;   /* 24 */
  --text-3xl:  1.875rem; /* 30 */
  --text-4xl:  2.25rem;  /* 36 */
  --text-5xl:  3rem;     /* 48 */

  /* Weights actually used: 400 / 500 / 600 / 700 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing scale (tailwind-compatible) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

/* ── Dark theme (applied via .dark on html) ─────────────── */
.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.61 0.22 293);
  --primary-foreground: oklch(0.969 0.016 293.756);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.606 0.25 292.717);
  --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}

/* ============================================================
 *  Semantic type — mirror the blog/prose styles shipped in
 *  globals.css. Titles are primary-colored (purple), body is
 *  muted-foreground, strong is foreground.
 * ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h1, h1.ayni {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.h2, h2.ayni {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.h3, h3.ayni {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--foreground);
  line-height: 1.25;
}
.h4, h4.ayni {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--foreground);
  line-height: 1.3;
}
.eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}
.lead {
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--muted-foreground);
  font-weight: var(--weight-regular);
}
.body, p.ayni {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--muted-foreground);
}
.small {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.caption {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.mono, code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* The "pill eyebrow" — badge style pill used above product names
   (absolute, bg-primary, white text, uppercase tracking) */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
