/* ============================================================================
 * Finch Design System — Colors & Type
 * Source of truth extracted from webApp/src/react-app/styles/theme.css
 * ========================================================================== */

/* ---- Fonts ----
 * Finch uses a single body family (Inter, variable optical size) plus an italic
 * serif accent used for one word in the hero ("Confidence"). The serif isn't
 * pinned in code — the `font-serif` Tailwind class resolves to the browser
 * default serif. We standardize on "Source Serif 4" as a close match; swap as
 * needed. */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

:root {
  /* ---- Type families ----------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ---- Type scale (matches app h1–h4; Tailwind text-* tokens) ----------- */
  --text-xs: 0.75rem;      /* 12px — meta, timestamps */
  --text-sm: 0.875rem;     /* 14px — body default in product */
  --text-base: 1rem;       /* 16px — form input, body */
  --text-lg: 1.125rem;     /* 18px — h3 */
  --text-xl: 1.25rem;      /* 20px — h2, card titles */
  --text-2xl: 1.5rem;      /* 24px — h1 */
  --text-3xl: 1.875rem;    /* 30px — section headings */
  --text-4xl: 2.25rem;     /* 36px — landing h2 */
  --text-5xl: 3rem;        /* 48px — marketing hero md */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px — marketing hero lg */

  /* ---- Weights ---------------------------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Leading / tracking ---------------------------------------------- */
  --leading-tight: 1.08;       /* hero headline */
  --leading-snug: 1.3;         /* h1 */
  --leading-relaxed: 1.625;    /* body copy */
  --leading-loose: 1.75;       /* prose / blog */
  --tracking-tight: -0.02em;
  --tracking-heading: -0.015em;
  --tracking-wide: 0.12em;     /* eyebrow uppercase */

  /* ---- Colors (light — source of truth) -------------------------------- */
  --background: #f9f9f8;
  --foreground: #0d0d0d;
  --card: #ffffff;
  --card-foreground: #0d0d0d;
  --popover: #ffffff;
  --popover-foreground: #0d0d0d;

  /* Brand primary: Finch orange. Used for the serif word, CTAs, active
   * focus, accent borders, ATS "strong match" dot. Never used for body copy. */
  --primary: #f15a29;
  --primary-hover: #d94d20;
  --primary-foreground: #ffffff;

  --secondary: #f0f0ed;
  --secondary-foreground: #0d0d0d;
  --muted: #f0f0ed;
  --muted-foreground: #737373;
  --accent: #e8e8e5;
  --accent-foreground: #0d0d0d;

  --destructive: #f43f1c;
  --destructive-foreground: #ffffff;

  --border: #e5e5e2;
  --input: transparent;
  --input-background: #f0f0ed;
  --switch-background: #cbced4;

  --skeleton: #ece8e1;
  --skeleton-highlight: rgba(255, 255, 255, 0.7);

  --ring: #f15a29;

  /* ---- ATS score semantic colors (ApplicationCard) --------------------- */
  --ats-strong: #16c55a;   /* neon green — >= 80 */
  --ats-good:   #3b82f6;   /* true blue  — >= 70 */
  --ats-fair:   #d97706;   /* amber      — >= 60 */
  --ats-weak:   #f43f1c;   /* stoplight  — below (also --destructive) */

  /* ---- Sidebar (profile/dashboard shells) ------------------------------ */
  --sidebar: #fafafa;
  --sidebar-foreground: #0d0d0d;
  --sidebar-primary: #f15a29;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0f0ed;
  --sidebar-accent-foreground: #0d0d0d;
  --sidebar-border: #e5e5e2;
  --sidebar-ring: #a0a0a0;

  /* ---- Radius system (Tailwind rounded-sm…xl2) ------------------------- */
  --radius: 0.625rem;                         /* 10px */
  --radius-sm: calc(var(--radius) - 4px);     /* 6px  — pills, small chips */
  --radius-md: calc(var(--radius) - 2px);     /* 8px  — inputs, buttons sm */
  --radius-lg: var(--radius);                 /* 10px — default */
  --radius-xl: calc(var(--radius) + 4px);     /* 14px — cards */
  --radius-2xl: 1rem;                         /* 16px — input bar shell */
  --radius-3xl: 1.5rem;                       /* 24px — hero preview frame */

  /* ---- Shadow / elevation --------------------------------------------- */
  /* Finch uses a quiet, close-to-ground elevation. Cards are mostly
   * borders + card bg, with sm shadow on key surfaces. Deep shadows only
   * appear behind the dark marketing "preview" frames. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-preview: 0 24px 70px rgba(7, 11, 22, 0.55);  /* dark marketing frame */

  /* ---- Spacing (4px baseline, Tailwind-aligned) ----------------------- */
  --space-0: 0;
  --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;
  --space-24: 6rem;
}

.dark {
  --background: #171717;
  --foreground: #ececec;
  --card: #1e1e1e;
  --card-foreground: #ececec;
  --popover: #1e1e1e;
  --popover-foreground: #ececec;
  --primary: #f15a29;
  --primary-hover: #ff6a3a;
  --primary-foreground: #ffffff;
  --secondary: #262626;
  --secondary-foreground: #ececec;
  --muted: #262626;
  --muted-foreground: #a0a0a0;
  --accent: #2a2a2a;
  --accent-foreground: #ececec;
  --destructive: #dc2626;
  --destructive-foreground: #fef2f2;
  --border: #2e2e2e;
  --input: #2e2e2e;
  --skeleton: #2a2a2a;
  --skeleton-highlight: rgba(255, 255, 255, 0.08);
  --ring: #f15a29;
  --sidebar: #1e1e1e;
  --sidebar-foreground: #ececec;
  --sidebar-primary: #f15a29;
  --sidebar-accent: #262626;
  --sidebar-border: #2e2e2e;
}

/* ============================================================================
 * Semantic role tokens — use these in components, not the color vars directly.
 * ========================================================================== */
:root {
  --fg-1: var(--foreground);                        /* primary text */
  --fg-2: var(--muted-foreground);                  /* secondary/subdued */
  --fg-3: color-mix(in srgb, var(--muted-foreground) 70%, transparent); /* tertiary */
  --fg-on-primary: var(--primary-foreground);

  --bg-page: var(--background);
  --bg-card: var(--card);
  --bg-chip: var(--secondary);                      /* chip, hover bg */
  --bg-subtle: var(--muted);
  --bg-accent-tint: color-mix(in srgb, var(--primary) 10%, transparent);
  --bg-accent-tint-strong: color-mix(in srgb, var(--primary) 15%, transparent);

  --border-default: var(--border);
  --border-hover-accent: color-mix(in srgb, var(--primary) 30%, transparent);
  --border-focus-accent: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ============================================================================
 * Semantic element styles — apply directly to h1..h4, p, code, eyebrow, etc.
 * Mirrors the app's @layer base block.
 * ========================================================================== */
body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: var(--text-2xl); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-xl); font-weight: var(--font-weight-medium); line-height: 1.35; letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-lg); font-weight: var(--font-weight-medium); line-height: 1.4; letter-spacing: -0.01em; }
h4 { font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: 1.5; }

.display-hero {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.display-hero .accent {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--primary);
  font-weight: 500;
}

.eyebrow {
  font-size: var(--text-sm);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.meta {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

.body { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--fg-1); }
.body-lg { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-2); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--secondary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}