/* ============================================================
   Itamar Friedman Design System — colors + type tokens
   Based on shadcn/ui v4 'zinc' theme + Geist font family.
   ============================================================ */

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

:root {
  /* --- Radii ----------------------------------------------------------- */
  --radius: 0.625rem;             /* 10px */
  --radius-sm: calc(var(--radius) * 0.6);   /* 6px  */
  --radius-md: calc(var(--radius) * 0.8);   /* 8px  */
  --radius-lg: var(--radius);                /* 10px */
  --radius-xl: calc(var(--radius) * 1.4);   /* 14px */
  --radius-2xl: calc(var(--radius) * 1.8);  /* 18px */

  /* --- Colors — shadcn zinc, light ------------------------------------ */
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --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);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --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);
  --destructive-foreground: oklch(0.97 0.01 17);
  --success: oklch(0.62 0.17 150);
  --success-foreground: oklch(0.99 0.02 155);
  --warning: oklch(0.75 0.17 70);
  --warning-foreground: oklch(0.25 0.08 60);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --surface: oklch(0.98 0 0);
  --surface-foreground: var(--foreground);

  /* Data viz — blue ramp */
  --chart-1: oklch(0.871 0.006 286.286);
  --chart-2: oklch(0.552 0.016 285.938);
  --chart-3: oklch(0.442 0.017 285.786);
  --chart-4: oklch(0.37 0.013 285.805);
  --chart-5: oklch(0.274 0.006 286.033);

  /* Sidebar */
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --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);

  /* Code surfaces */
  --code: var(--surface);
  --code-foreground: var(--surface-foreground);
  --code-highlight: oklch(0.96 0 0);
  --code-number: oklch(0.56 0 0);

  /* --- Type families --------------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  /* --- Type scale (semantic) ------------------------------------------ */
  --text-xs:   12px;     --leading-xs:   16px;
  --text-sm:   14px;     --leading-sm:   20px;
  --text-base: 16px;     --leading-base: 24px;
  --text-lg:   18px;     --leading-lg:   28px;
  --text-xl:   20px;     --leading-xl:   28px;
  --text-2xl:  24px;     --leading-2xl:  32px;
  --text-3xl:  30px;     --leading-3xl:  36px;
  --text-4xl:  36px;     --leading-4xl:  44px;
  --text-5xl:  48px;     --leading-5xl:  56px;
  --text-6xl:  60px;     --leading-6xl:  64px;

  /* Spacing (Tailwind default, 4px base — for reference) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* Shadows (shadcn-ish) */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 3px 0 rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

.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.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --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.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.58 0.22 27);
  --success: oklch(0.7 0.17 150);
  --success-foreground: oklch(0.15 0.05 150);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --surface: oklch(0.2 0 0);
  --surface-foreground: oklch(0.708 0 0);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --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 element styles — apply anywhere the tokens are loaded
   ============================================================ */

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: 600;
  color: var(--foreground);
  margin: 0;
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--foreground);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  color: var(--muted-foreground);
}

small, .small {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--muted-foreground);
}

.muted { color: var(--muted-foreground); }
.fg    { color: var(--foreground); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--code);
  color: var(--code-foreground);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

kbd {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms ease-out;
}
a:hover { text-decoration-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--foreground);
  color: var(--background);
}