/* ============================================================
   Latitude Design System — Colors & Typography Tokens
   Source: latitude-llm/packages/ui/src/styles/globals.css
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter Display — used for hero / oversized type (24pt optical) */
@font-face {
  font-family: "Inter Display";
  src: url("./fonts/Inter-Display-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("./fonts/Inter-Display-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

/* ============================================================
   Color system (HSL tokens — semantic, light + dark)
   Pulled verbatim from @repo/ui globals.css. Use as
   `background: hsl(var(--primary))`.
   ============================================================ */
:root {
  /* surfaces */
  --background: 0 0% 100%;
  --background-shadow: 0 0% 0%;
  --background-code: 0 0% 98%;
  --background-gray: 0 0% 99%;
  --foreground: 224 71.5% 4%;
  --card: 0 0% 100%;
  --card-foreground: 223 70% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 223 70% 4%;

  /* brand / primary — Latitude blue */
  --primary: 210 100% 50%;            /* #0080FF */
  --primary-foreground: 210 20% 98%;
  --primary-muted: 210 100% 96%;
  --primary-muted-hover: 210 100% 97%;

  /* secondary */
  --secondary: 210 20% 98%;
  --secondary-foreground: 221 39% 11%;
  --secondary-muted: 210 20% 96%;
  --secondary-muted-hover: 210 18% 93%;

  /* accent (the "branded link" / soft-blue surface) */
  --accent: 210 100% 97%;
  --accent-button: 211 97% 35%;
  --accent-foreground: 211 97% 35%;

  /* muted neutrals */
  --muted: 220 14% 96%;
  --muted-foreground: 211 11% 45%;

  /* destructive */
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --destructive-muted: 0 93% 94%;
  --destructive-muted-foreground: 0 74% 42%;
  --destructive-muted-hover: 0 90% 90%;

  /* success */
  --success: 142 72% 29%;
  --success-foreground: 120 87% 97%;
  --success-muted: 141 84% 93%;
  --success-muted-foreground: 142 72% 29%;

  /* warning */
  --warning-muted: 48 96% 89%;
  --warning-muted-foreground: 26 90% 37%;

  /* extras */
  --yellow: 41 96% 91%;
  --purple: 289 51% 92%;
  --purple-foreground: 289 51% 14%;
  --phrase: 271 91% 65%;
  --phrase-foreground: 272 72% 47%;

  /* form */
  --border: 0 0% 89.8%;
  --input: 0 0% 84.8%;
  --ring: 211 94% 43%;

  /* logo colors (from favicon — never change) */
  --logo-blue: #0080FF;
  --logo-red: #E63948;
  --logo-yellow: #FEC61A;
  --logo-black: #030712;

  /* charts */
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;

  /* radii — single source-of-truth, others derive */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px); /* 4px */
  --radius-md: calc(var(--radius) - 2px); /* 6px */
  --radius-lg: var(--radius);             /* 8px */
  --radius-xl: calc(var(--radius) + 4px); /* 12px */
  --radius-2xl: calc(2 * var(--radius));  /* 16px */

  /* button face elevation (inset highlight, then larger outer shadow on hover) */
  --button-face-inset-shadow: inset 0 3px 8px 0 rgb(255 255 255 / 0.48);
  --button-face-inset-shadow-hover: inset 0 3px 8px 0 rgb(255 255 255 / 0.3);

  /* popover shadow stack */
  --shadow-popover:
    0px 1px 3px 0px hsl(var(--background-shadow) / 0.1),
    0px 1px 2px -1px hsl(var(--background-shadow) / 0.1),
    0px 0px 6px 0px hsl(var(--background-shadow) / 0.04);

  --scrollbar: 217.9 11.92% 64.26%;
}

.dark {
  --background: 0 0% 7%;
  --background-shadow: 0 0% 100%;
  --background-code: 0 0% 11%;
  --background-gray: 0 0% 10%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 13%;
  --popover-foreground: 0 0% 98%;

  --primary: 211 94% 43%;
  --primary-foreground: 210 20% 98%;
  --primary-muted: 210 100% 12%;
  --primary-muted-hover: 210 100% 16%;

  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 98%;
  --secondary-muted: 0 0% 14%;
  --secondary-muted-hover: 0 0% 18%;

  --accent: 211 88% 10%;
  --accent-button: 211 97% 35%;
  --accent-foreground: 211 94% 65%;

  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --destructive-muted: 0 75% 15%;
  --destructive-muted-foreground: 0 75% 56%;
  --destructive-muted-hover: 0 72% 20%;

  --success: 142 76% 36%;
  --success-foreground: 120 87% 97%;
  --success-muted: 141 84% 10%;
  --success-muted-foreground: 142 76% 36%;

  --warning-muted: 48 100% 10%;
  --warning-muted-foreground: 49 100% 36%;

  --yellow: 41 90% 14%;
  --purple: 289 51% 14%;
  --purple-foreground: 289 51% 65%;
  --phrase: 271 91% 65%;
  --phrase-foreground: 269 97% 85%;

  --border: 231 9% 12.9%;
  --input: 0 0% 14.9%;
  --ring: 205 91% 44%;

  --button-face-inset-shadow: inset 0 3px 8px 0 rgb(255 255 255 / 0.3);
  --button-face-inset-shadow-hover: inset 0 3px 8px 0 rgb(255 255 255 / 0.1);
}

/* ============================================================
   Typography
   ============================================================ */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Scale (matches @repo/ui font.ts) — h1 biggest, h8 smallest. */
  --text-h1: 36px;     /* 2.25rem */ --leading-h1: 48px;
  --text-h2: 30px;     /* 1.875rem*/ --leading-h2: 36px;
  --text-h3: 20px;     /* 1.25rem */ --leading-h3: 32px;
  --text-h4: 16px;     /* 1rem    */ --leading-h4: 24px;
  --text-h5: 14px;     /* 0.875rem*/ --leading-h5: 20px;
  --text-h6: 12px;     /* 0.75rem */ --leading-h6: 16px;
  --text-h7: 10px;     /* 0.625rem*/ --leading-h7: 16px;
  --text-h8: 8px;                    --leading-h8: 10px;
}

/* Semantic type primitives — match @repo/ui <Text.H*> usage. */
.h1 { font-family: var(--font-sans); font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: 700; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-sans); font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: 700; letter-spacing: -0.015em; }
.h3 { font-family: var(--font-sans); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: 600; letter-spacing: -0.01em; }
.h4 { font-family: var(--font-sans); font-size: var(--text-h4); line-height: var(--leading-h4); font-weight: 600; }
.h5 { font-family: var(--font-sans); font-size: var(--text-h5); line-height: var(--leading-h5); font-weight: 500; }
.h6 { font-family: var(--font-sans); font-size: var(--text-h6); line-height: var(--leading-h6); font-weight: 500; }
.h7 { font-family: var(--font-sans); font-size: var(--text-h7); line-height: var(--leading-h7); font-weight: 500; }

.mono { font-family: var(--font-mono); font-size: var(--text-h5); line-height: var(--leading-h5); }
.mono-sm { font-family: var(--font-mono); font-size: var(--text-h6); line-height: var(--leading-h6); }

.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.display-2xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.022em;
}

/* Foreground helpers */
.text-fg          { color: hsl(var(--foreground)); }
.text-fg-muted    { color: hsl(var(--muted-foreground)); }
.text-accent-fg   { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-success     { color: hsl(var(--success)); }

body {
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-feature-settings: "rlig" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
}