/* ============================================================
   MFM Chat — Foundations
   Color + Type tokens.
   Brand sans: Inter (variable, self-hosted). Brand has no distinct
   mono face — we use the platform mono stack for code.
   ============================================================ */

/* ----- FONTS ----- */
/* Inter (variable) — user-supplied brand sans. Self-hosted from /fonts.
   Rubik — display face for hero/title moments only (not body or UI). */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Rubik — full static weight family (300 → 900, regular + italic). */
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/Rubik-BlackItalic.ttf") format("truetype");
  font-weight: 900; font-style: italic; font-display: swap; }

/* ============================================================
   COLOR TOKENS — LIGHT (default)
   ============================================================ */
:root {
  /* ── BRAND PALETTE ── (MFM 2026 identity)
     Use these for brand surfaces (logo, slide chrome, marketing).
     The semantic tokens below derive from them where it makes sense. */
  --brand-orange:     #FF4800;
  --brand-black:      #1E1E1E;
  --brand-dark-gray:  #8F8F8F;
  --brand-light-gray: #CECECE;
  --brand-white:      #FFFFFF;

  /* Derived: a pale tint of brand orange for soft fills (text selection,
     subtle highlights, hover tints). Not part of the formal brand palette
     — added so we can use brand presence in low-emphasis surfaces without
     the full saturated hit. */
  --brand-pale: #FFD6C2;

  /* Dark-mode counterpart for --brand-pale. The light tint blows out on
     dark backgrounds, so we use a deeper desaturated orange that still
     reads as "of the brand". Applied via .dark override below. */
  --brand-pale-dark: #B33500;

  /* Display-text color — used by hero / greeting headlines.
     Slightly dimmer than --foreground so titles read as "soft" without
     looking disabled. Adjust opacity here to tune across themes. */
  --display-foreground: color-mix(in oklab, var(--foreground) 85%, transparent);

  /* ── BRAND ROLE ── (semantic alias)
     The brand accent — use sparingly. Focus rings, links, focal moments. */
  --brand: var(--brand-orange);
  --brand-foreground: var(--brand-white);

  /* Surfaces */
  --background: var(--brand-white);        /* page bg */
  --foreground: var(--brand-black);        /* primary text — brand black */
  --card: var(--brand-white);
  --card-foreground: var(--brand-black);
  --popover: var(--brand-white);
  --popover-foreground: var(--brand-black);

  /* Brand / interactive */
  --primary: var(--brand-black);           /* primary button = brand black */
  --primary-foreground: var(--brand-white);
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: var(--brand-black);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: var(--brand-dark-gray); /* secondary text — brand dark gray */
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: var(--brand-black);

  /* Slightly-dimmed foreground — for greetings, large display headings,
     anything that wants to feel "important but soft". Sits between
     --foreground (full strength) and --muted-foreground (secondary).
     Mixed at runtime so it follows the theme automatically. */
  --foreground-soft: color-mix(in oklab, var(--foreground) 85%, transparent);

  /* Status */
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(0 0% 98%);

  /* Lines + focus */
  --border: var(--brand-light-gray);       /* hairlines = brand light gray */
  --input: var(--brand-light-gray);
  --ring: var(--brand);                    /* focus rings glow brand orange */

  /* Sidebar */
  --sidebar: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);

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

  /* Suggestion / inline accent (used for prosemirror highlights) */
  --accent-blue: hsl(217.2 91.2% 59.8%);

  /* Radii — base + derived */
  --radius: 0.5rem;        /* 8px  — md */
  --radius-sm: 0.25rem;    /* 4px  — sm */
  --radius-md: 0.375rem;   /* 6px  */
  --radius-lg: 0.5rem;     /* 8px  — same as base */
  --radius-xl: 0.75rem;    /* 12px — prompt input */
  --radius-2xl: 1rem;      /* 16px — auth card */
  --radius-full: 9999px;   /* pills, avatars, send button */

  /* Spacing scale (4-px grid, Tailwind-aligned) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Elevation — extremely subtle. shadcn `shadow-xs` is the
     workhorse; we rarely go beyond shadow-sm. */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 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.06);

  /* Motion (framer-motion defaults used in greeting/suggestions) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}

/* ============================================================
   COLOR TOKENS — DARK
   Applied via .dark on <html> (next-themes pattern).
   ============================================================ */
.dark {
  --background: hsl(240 5.9% 10%);          /* match sidebar — unified chrome */
  --foreground: hsl(0 0% 98%);
  --card: hsl(240 5.9% 10%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(240 5.9% 10%);
  --popover-foreground: hsl(0 0% 98%);

  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);

  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(0 0% 98%);

  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: var(--brand);                    /* dark mode focus ring stays brand orange */

  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);

  --chart-1: hsl(220 70% 50%);
  --chart-2: hsl(160 60% 45%);
  --chart-3: hsl(30 80% 55%);
  --chart-4: hsl(280 65% 60%);
  --chart-5: hsl(340 75% 55%);
}

/* ============================================================
   TYPE SYSTEM
   Sans (Inter) is the ONLY brand face. Mono is the platform default,
   used for code blocks, inline code, and prompt-input KaTeX.
   The product has no display/serif/script faces.
   ============================================================ */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  /* Display face — reserved for hero/title moments (e.g. "Meet IRIS 2.0").
     Falls back to Inter if Rubik fails to load. */
  --font-display: "Rubik", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  /* Sizes — derived from the codebase's Tailwind usage.
     The product is tight: most reading text is text-sm. */
  --fs-xs:   0.75rem;   /* 12px — metadata, captions, kbd */
  --fs-sm:   0.875rem;  /* 14px — body / chat messages */
  --fs-base: 1rem;      /* 16px — default html base */
  --fs-lg:   1.125rem;  /* 18px — sidebar title "Chatbot" */
  --fs-xl:   1.25rem;   /* 20px — greeting on mobile */
  --fs-2xl:  1.5rem;    /* 24px — greeting on md+, auth h3 */
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
}

/* ----- Semantic type roles -----
   Use these classes when you need to be expressive about role.
   Otherwise prefer the Tailwind utilities the source uses. */

.t-display {                                          /* "Chat SDK" hero */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);                /* greeting "Hello there!" */
  line-height: var(--lh-snug);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);                 /* "Sign In", sidebar brand */
  line-height: var(--lh-snug);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);                 /* chat message default */
  line-height: var(--lh-base);
}
.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.t-meta {                                  /* sidebar dates, model desc */
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--muted-foreground);
}
.t-label {                                 /* buttons, menu items */
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: 1;
}
.t-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;                    /* 13px */
  line-height: var(--lh-base);
}

/* Map directly onto raw tags for prototypes that don't want classes */
body { font-family: var(--font-sans); color: var(--foreground); background: var(--background); }
h1   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h2   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h3   { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-lg);  line-height: var(--lh-snug); }
p    { font-family: var(--font-sans); font-weight: var(--fw-regular);  font-size: var(--fs-sm);  line-height: var(--lh-base); }
small{ font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--muted-foreground); }
code, pre { font-family: var(--font-mono); }

/* ============================================================
   BRAND TOUCHES
   Small, deliberate moments where the brand orange shows up.
   Keep these rare — orange should land as emphasis, not chrome.
   ============================================================ */

/* Text selection — pale orange tint, brand-black text on top. */
::selection {
  background-color: var(--brand-pale);
  color: var(--brand-black);
}
/* Dark mode: swap to the deeper brand tint + light text. */
.dark ::selection {
  background-color: var(--brand-pale-dark);
  color: var(--brand-white);
}

/* Inline links in markdown / assistant messages. Use the brand role
   so a future re-theme just swaps one var. */
a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }