/* ============================================================
 * PostHog Code — Colors & Type
 * Lifted directly from apps/code/src/renderer/styles/globals.css
 * + tailwind tokens + Radix Themes scope.
 * ============================================================ */

/* -------- Fonts -------------------------------------------------- */

@font-face {
  font-family: "Open Runde";
  src: url("./fonts/OpenRunde-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("./fonts/OpenRunde-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("./fonts/OpenRunde-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Runde";
  src: url("./fonts/OpenRunde-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

/* -------- Base tokens -------------------------------------------- */

:root {
  /* Brand */
  --ph-orange: #f54d00;
  --ph-yellow: #f8be2a;
  --ph-blue: #1d4aff; /* PostHog brand blue, used by website/marketing */

  /* Type stacks
     - Note: production app prefers Berkeley Mono (paid font), with JetBrains
       Mono as the public fallback. Berkeley Mono is NOT in this design system
       repo for licensing reasons. */
  --font-sans:
    "Open Runde", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Berkeley Mono", "Consolas", "Monaco", monospace;

  /* Type scale (matches Tailwind v4 defaults + tightened LH from globals.css) */
  --text-xs: 12px;          --text-xs-lh: 16.5px;
  --text-sm: 14px;          --text-sm-lh: 19.25px;
  --text-base: 16px;        --text-base-lh: 22px;
  --text-lg: 18px;          --text-lg-lh: 22.5px;
  --text-xl: 20px;          --text-xl-lh: 25px;
  --text-2xl: 24px;         --text-2xl-lh: 30px;
  --text-3xl: 30px;         --text-3xl-lh: 36px;
  --text-4xl: 36px;         --text-4xl-lh: 40px;

  /* Radii (Radix scaling=1) */
  --radius-1: 3px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 12px;
  --radius-6: 16px;
  --radius-full: 9999px;

  /* Spacing scale (Radix --space-N == Tailwind 1:1 for 1..4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
}

/* -------- Light theme (default) ---------------------------------- */
/* Accent = PostHog Orange. Neutrals = warm greenish-grey. */

:root,
.light,
.light-theme {
  /* Accent: orange */
  --orange-1: #fff5f0;  --orange-2: #ffe8dc;
  --orange-3: #ffd0b8;  --orange-4: #ffb38a;
  --orange-5: #ff8f56;  --orange-6: #f57030;
  --orange-7: #e05a18;  --orange-8: #c94800;
  --orange-9: #f54d00;  /* primary brand */
  --orange-10: #e64600; --orange-11: #a33300; --orange-12: #4d1800;

  --orange-a3: rgba(245, 77, 0, 0.18);
  --orange-a6: rgba(245, 77, 0, 0.54);
  --orange-a9: rgba(245, 77, 0, 0.9);

  --orange-contrast: #fff;
  --orange-surface: rgba(255, 245, 240, 0.8);
  --orange-indicator: #f54d00;

  /* Neutrals: warm greenish-grey */
  --gray-1: #f2f3ee;  --gray-2: #eceee8;
  --gray-3: #e4e5de;  --gray-4: #d8dbd1;
  --gray-5: #cbd0c3;  --gray-6: #bcc1b4;
  --gray-7: #a9af9f;  --gray-8: #93998a;
  --gray-9: #6b7165;  --gray-10: #5a6054;
  --gray-11: #3a4036; --gray-12: #0d0d0d;

  --gray-a3: rgba(20, 24, 10, 0.1);
  --gray-a6: rgba(20, 24, 10, 0.29);
  --gray-a9: rgba(20, 24, 10, 0.62);

  --gray-contrast: #ffffff;
  --gray-surface: rgba(242, 243, 238, 0.8);

  /* Semantic */
  --color-background: #f2f3ee;
  --color-fg: #0d0d0d;
  --color-fg-muted: #3a4036;
  --color-fg-subtle: #6b7165;
  --color-border: #d8dbd1;
  --color-surface: #f2f3ee;
  --color-surface-raised: #ffffff;
  --color-accent: #f54d00;
  --color-accent-fg: #fff;

  /* Terminal */
  --terminal-foreground: #0d0d0d;
  --terminal-background: transparent;
  --terminal-cursor: #f54d00;
  --terminal-selection-bg: rgba(245, 77, 0, 0.2);
}

/* -------- Dark theme -------------------------------------------- */
/* Accent = PostHog Yellow. Neutrals = cool blue-grey. */

.dark,
.dark-theme {
  --yellow-1: #14120a;  --yellow-2: #1a1608;
  --yellow-3: #261e07;  --yellow-4: #362900;
  --yellow-5: #443300;  --yellow-6: #524007;
  --yellow-7: #6b561a;  --yellow-8: #8c7230;
  --yellow-9: #f8be2a;  /* primary brand (dark accent) */
  --yellow-10: #ebb520; --yellow-11: #fcc84e; --yellow-12: #fde8b8;

  --yellow-a3: rgba(248, 190, 42, 0.1);
  --yellow-a6: rgba(248, 190, 42, 0.35);
  --yellow-a9: rgba(248, 190, 42, 0.92);

  --yellow-contrast: #1a1200;
  --yellow-surface: rgba(20, 18, 10, 0.5);
  --yellow-indicator: #f8be2a;

  --gray-1: #131316;  --gray-2: #18181f;
  --gray-3: #1e1e28;  --gray-4: #24243e;
  --gray-5: #2a2a37;  --gray-6: #2e2e3d;
  --gray-7: #40405a;  --gray-8: #616180;
  --gray-9: #7c7c9e;  --gray-10: #8d8daa;
  --gray-11: #9898b6; --gray-12: #e6e6e6;

  --gray-a3: rgba(200, 200, 240, 0.07);
  --gray-a6: rgba(200, 200, 240, 0.18);
  --gray-a9: rgba(200, 200, 240, 0.48);

  --gray-contrast: #ffffff;
  --gray-surface: rgba(19, 19, 22, 0.5);

  /* Semantic remap */
  --color-background: #131316;
  --color-fg: #e6e6e6;
  --color-fg-muted: #9898b6;
  --color-fg-subtle: #7c7c9e;
  --color-border: #2e2e3d;
  --color-surface: #131316;
  --color-surface-raised: #1e1e28;
  --color-accent: #f8be2a;
  --color-accent-fg: #1a1200;

  --terminal-foreground: #e6e6e6;
  --terminal-cursor: #f8be2a;
  --terminal-selection-bg: rgba(248, 190, 42, 0.25);
}

/* -------- Typography roles -------------------------------------- */
/* Use these classes anywhere outside Radix Themes scope. */

html, body { font-family: var(--font-sans); color: var(--color-fg); background: var(--color-background); -webkit-font-smoothing: antialiased; }

.h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-3xl); line-height: var(--text-3xl-lh); letter-spacing: -0.01em; color: var(--color-fg); }
.h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-2xl); line-height: var(--text-2xl-lh); letter-spacing: -0.005em; color: var(--color-fg); }
.h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xl); line-height: var(--text-xl-lh); color: var(--color-fg); }
.h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-lg); line-height: var(--text-lg-lh); color: var(--color-fg); }
.title-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-subtle); }

.body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-fg); }
.body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--text-base-lh); color: var(--color-fg); }
.body-muted { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-fg-muted); }
.caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--color-fg-subtle); }

.code, code, kbd, samp { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.code-block { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; background: var(--gray-a3); border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: var(--space-3); }

/* -------- Surfaces, borders, shadows ----------------------------- */

.surface     { background: var(--color-surface); }
.surface-raised { background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-3); }
.divider     { background: var(--color-border); height: 1px; width: 100%; }

/* PostHog "Lemon UI" 3D button — used on light auth/onboarding only */
.lemon-button {
  background: var(--orange-9);
  color: var(--orange-contrast);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-3);
  padding: 8px 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 0 -1px var(--orange-8);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.lemon-button:hover  { transform: translateY(-1px); }
.lemon-button:active { transform: translateY(1px); box-shadow: none; }