/* ============================================================================
 * ChatTutor — design tokens
 * ----------------------------------------------------------------------------
 * TRANSCRIBED 1:1 from fe/src/main.css. Do not hand-tune these values.
 * When the repo changes, re-transcribe — do not reinterpret.
 *
 * Source of truth: fe/src/main.css (@theme, @theme inline, :root, .dark)
 * Product: ChatTutor · Company: HumanThinking
 * Stack: Vue 3 + shadcn-vue (new-york, neutral base) + Tailwind v4 + Reka UI
 * ============================================================================ */

@import url("./primitives.css");
@import url("./composites.css");

/* ---------------------------------------------------------------------------
 * Fonts
 * The repo loads Inter Variable via `@fontsource-variable/inter`. We register
 * the static Inter faces shipped in fonts/ under the same family name so the
 * design system works offline. Weights 300–900 are covered; 300 is the
 * product's default body weight (see --font-weight-normal below).
 * ------------------------------------------------------------------------- */

@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Inter_18pt-Light.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/Inter_18pt-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter_18pt-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Inter_18pt-Italic.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter_18pt-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Inter_18pt-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter_18pt-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Inter_18pt-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter_18pt-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/Inter_18pt-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Inter_18pt-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/Inter_18pt-Black.ttf") format("truetype"); }

/* ---------------------------------------------------------------------------
 * @theme  — from fe/src/main.css
 * ------------------------------------------------------------------------- */

:root {
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-weight-normal: 300;

  /* 11px — half-step below Tailwind's text-xs (0.75rem / 12px) */
  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;

  /* Tailwind's own type scale, spelled out for non-Tailwind consumers */
  --text-xs: 0.75rem;    --text-xs--line-height: 1rem;
  --text-sm: 0.875rem;   --text-sm--line-height: 1.25rem;
  --text-base: 1rem;     --text-base--line-height: 1.5rem;
  --text-lg: 1.125rem;   --text-lg--line-height: 1.75rem;
  --text-xl: 1.25rem;    --text-xl--line-height: 1.75rem;
  --text-2xl: 1.5rem;    --text-2xl--line-height: 2rem;
  --text-3xl: 1.875rem;  --text-3xl--line-height: 2.25rem;
  --text-4xl: 2.25rem;   --text-4xl--line-height: 2.5rem;

  /* 4px spacing base — Tailwind default, referenced by alert's grid-cols calc */
  --spacing: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * @theme inline  — radii are derived, never hard-coded
 * ------------------------------------------------------------------------- */

:root {
  --radius: 0.625rem;                         /* 10px */
  --radius-sm: calc(var(--radius) - 4px);     /* 6px  */
  --radius-md: calc(var(--radius) - 2px);     /* 8px  */
  --radius-lg: var(--radius);                 /* 10px */
  --radius-xl: calc(var(--radius) + 4px);     /* 14px */

  /* Brand — indigo-600. Used by --border-focus and the `brand` variants
     of Button/Badge. NOT the default `primary`. */
  --color-brand: oklch(0.511 0.262 276.966);  /* indigo-600 · #4f46e5 */
  --color-indigo-600: oklch(0.511 0.262 276.966);
  --color-indigo-700: oklch(0.457 0.24 277.023);
}

/* ---------------------------------------------------------------------------
 * :root  — light theme, verbatim from fe/src/main.css
 * ------------------------------------------------------------------------- */

:root {
  --background: oklch(1 0 0);
  --brand: var(--color-brand);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.93 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.93 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --border-strong: oklch(0.8 0 0);
  --border-focus: var(--color-brand);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Alert `warning` variant reaches for raw Tailwind yellows */
  --yellow-50: oklch(0.987 0.026 102.212);
  --yellow-200: oklch(0.945 0.129 101.54);
  --yellow-300: oklch(0.905 0.182 98.111);
  --yellow-800: oklch(0.476 0.114 61.907);

  /* Shadows — Tailwind defaults, the only two the repo uses */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ---------------------------------------------------------------------------
 * .dark  — verbatim from fe/src/main.css. Note: the repo toggles a `.dark`
 * class (see @custom-variant dark), not a data-attribute.
 * ------------------------------------------------------------------------- */

.dark {
  --background: oklch(0.145 0 0);
  --brand: var(--color-brand);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --border-strong: oklch(1 0 0 / 20%);
  --border-focus: var(--color-brand);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --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.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

/* ---------------------------------------------------------------------------
 * @layer base  — from fe/src/main.css
 * ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }

html, body { height: 100%; margin: 0; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);   /* 300 — the product runs Light */
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--foreground); text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
a:hover { color: var(--foreground); text-decoration-line: underline; }

/* @utility scrollbar-hide */
.scrollbar-hide { scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }