/* ============================================================
   GRE Vocab — Colors & Type
   Pulled from the live app (global.css + index.html inline styles).
   The app uses shadcn/ui tokens as HSL triplets plus a playful
   pastel group-background system and a weak/weakest word accent.
   ============================================================ */

:root {
  /* ---- shadcn/ui base tokens (HSL triplets, wrap in hsl()) ---- */
  --background-hsl: 0 0% 100%;
  --foreground-hsl: 222.2 84% 4.9%;

  --card-hsl: 0 0% 100%;
  --card-foreground-hsl: 222.2 84% 4.9%;

  --popover-hsl: 0 0% 100%;
  --popover-foreground-hsl: 222.2 84% 4.9%;

  --primary-hsl: 222.2 47.4% 11.2%;
  --primary-foreground-hsl: 210 40% 98%;

  --secondary-hsl: 210 40% 96.1%;
  --secondary-foreground-hsl: 222.2 47.4% 11.2%;

  --muted-hsl: 210 40% 96.1%;
  --muted-foreground-hsl: 215.4 16.3% 46.9%;

  --accent-hsl: 210 40% 96.1%;
  --accent-foreground-hsl: 222.2 47.4% 11.2%;

  --destructive-hsl: 0 84.2% 60.2%;
  --destructive-foreground-hsl: 210 40% 98%;

  --border-hsl: 214.3 31.8% 91.4%;
  --input-hsl: 214.3 31.8% 91.4%;
  --ring-hsl: 222.2 84% 4.9%;

  /* Resolved (easier in plain CSS) */
  --background: hsl(var(--background-hsl));
  --foreground: hsl(var(--foreground-hsl));
  --card: hsl(var(--card-hsl));
  --card-foreground: hsl(var(--card-foreground-hsl));
  --primary: hsl(var(--primary-hsl));
  --primary-foreground: hsl(var(--primary-foreground-hsl));
  --secondary: hsl(var(--secondary-hsl));
  --muted: hsl(var(--muted-hsl));
  --muted-foreground: hsl(var(--muted-foreground-hsl));
  --border: hsl(var(--border-hsl));
  --destructive: hsl(var(--destructive-hsl));

  /* ---- Product accents (literal hex used across the app) ---- */
  --blue-500: #4285f4;         /* primary CTA (Google blue, pricing) */
  --blue-600: #2563eb;         /* focus ring on inputs */
  --blue-700: #3367d6;         /* pressed state */
  --blue-link: #4285f4;

  /* Correct / success */
  --green-light: #8bc34a;
  --green: #4caf50;
  --green-cta: #10b981;        /* pricing check marks, success */

  /* Error / destructive */
  --red-error: #ef4444;
  --red-logout: #e53e3e;

  /* Trophy / completion badge */
  --trophy-bg-from: #ffe27a;
  --trophy-bg-to:   #ffeab1;
  --trophy-fg:      #7b5500;

  /* Weak words (orange) */
  --weak-bg-from:  #ffcc80;
  --weak-bg-to:    #ffe0b2;
  --weak-fg:       #9c5000;
  --weak-opt-bg:   #fff0e0;

  /* Weakest words (red) */
  --weakest-bg-from: #ff8a80;
  --weakest-bg-to:   #ffcdd2;
  --weakest-fg:      #c10000;
  --weakest-opt-bg:  #ffebeb;

  /* Premium (yellow) — matches .from-yellow-100 → .to-yellow-200 */
  --premium-bg-from: #fef9c3;  /* yellow-100 */
  --premium-bg-to:   #fef08a;  /* yellow-200 */
  --premium-fg:      #854d0e;  /* yellow-800 */
  --premium-border:  #fde047;  /* yellow-300 */

  /* Progress bar gradient (bottom of screen) */
  --progress-from: #4caf50;
  --progress-mid:  #8bc34a;
  --progress-to:   #cddc39;

  /* ---- Group-background pastels (hsl(H, 50%, 90%)) ---- */
  /* The app cycles 18 hues across 38 groups — same palette repeats. */
  --group-1:  hsl(210, 50%, 90%);  /* default — soft sky */
  --group-2:  hsl(170, 50%, 90%);
  --group-3:  hsl(130, 50%, 90%);
  --group-4:  hsl(90,  50%, 90%);
  --group-5:  hsl(50,  50%, 90%);
  --group-6:  hsl(20,  50%, 90%);
  --group-7:  hsl(350, 50%, 90%);
  --group-8:  hsl(310, 50%, 90%);
  --group-9:  hsl(270, 50%, 90%);
  --group-10: hsl(230, 50%, 90%);

  /* Weak / weakest full-page backgrounds */
  --bg-weak:    hsl(30, 70%, 90%);
  --bg-weakest: hsl(0,  70%, 90%);

  /* ---- Spacing / radius / shadow ---- */
  --radius: 0.5rem;        /* shadcn base */
  --radius-card: 12px;     /* app overrides .rounded-lg/.rounded-md to 12px */
  --radius-pill: 9999px;

  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.08);     /* badges */
  --shadow-md:  0 4px 12px rgba(0,0,0,0.12);    /* badge hover */
  --shadow-lg:  0 4px 20px rgba(0,0,0,0.08);    /* login card */
  --shadow-xl:  0 8px 30px rgba(0,0,0,0.12);    /* login card hover */
  --shadow-float: 0 15px 30px rgba(0, 120, 255, 0.15); /* main card hover */

  /* ---- Type (system stack — Tailwind 2 default) ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Type scale — used across the app (Tailwind defaults) */
  --text-xs:   0.75rem;   /* 12px — tooltip, meta */
  --text-sm:   0.875rem;  /* 14px — body, buttons, labels */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px — pricing body */
  --text-xl:   1.25rem;   /* 20px — result message */
  --text-2xl:  1.5rem;    /* 24px — word heading, section h2 */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.5rem;    /* 40px — pricing h1 */
  --text-emoji-lg: 3rem;  /* result emoji */
  --text-emoji-xl: 48px;  /* loading books */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* ---- Semantic type classes (what the app actually uses) ---- */
html { font-family: var(--font-sans); color: var(--foreground); }

.type-h1 {
  font-size: var(--text-4xl); font-weight: var(--fw-bold);
  color: #1f2937; line-height: 1.15;
}
.type-h2 {
  font-size: var(--text-2xl); font-weight: var(--fw-semibold);
  color: #374151;
}
.type-h3 {
  font-size: 1.4rem; font-weight: var(--fw-bold); color: #4b5563;
}
.type-word {
  /* The quiz sentence — the marquee headline on the main card */
  font-size: var(--text-2xl); text-align: center; line-height: 1.4;
}
.type-option {
  font-size: var(--text-sm); font-weight: var(--fw-medium);
}
.type-body { font-size: var(--text-sm); line-height: 1.6; color: #6b7280; }
.type-meta { font-size: var(--text-xs); color: var(--muted-foreground); }
.type-result-message {
  font-size: var(--text-xl); font-weight: var(--fw-semibold); text-align: center;
}
.type-example {
  font-size: var(--text-sm); font-style: italic; color: #666;
}