@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

/* KG Second Chances Solid font for landing page titles */
@font-face {
  font-family: "KG Second Chances Solid";
  src: url("../fonts/KGSecondChancesSolid.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@custom-variant dark (&:where(.dark, .dark *));

/* Preline */
@source "../lib/preline/dist/*.js";
@import "../lib/preline/variants.css";

/* Plugins */
@plugin "@tailwindcss/forms";

/* Custom Theme - Beige Palette for FluencyGo */
@theme {
  /* Dark mode colors */
  --color-slate-925: rgb(15, 23, 42);

  /* Beige palette */
  --color-beige-50: #FCF9F5;
  --color-beige-100: #F7EFE7;
  --color-beige-200: #EFE7DD;
  --color-beige-300: #E5D9CB;
  --color-beige-400: #D4C4B0;
  --color-beige-500: #C8B8A6;
  --color-beige-600: #B09982;
  --color-beige-700: #8F7B66;
  --color-beige-800: #6F5F4F;
  --color-beige-900: #4A3F35;

  /* Accent colors */
  --color-accent-orange: #FF8A4C;
  --color-accent-orange-light: #FFB088;
  --color-accent-orange-dark: #E66F31;

  --color-accent-blue: #6AB7FF;
  --color-accent-blue-light: #A0D1FF;
  --color-accent-blue-dark: #3A9BF5;

  --color-accent-pink: #FF6F91;
  --color-accent-pink-light: #FF9BB3;
  --color-accent-pink-dark: #E64870;

  --color-accent-yellow: #FFD66B;
  --color-accent-yellow-light: #FFE49B;
  --color-accent-yellow-dark: #F0BC3F;

  /* Typography */
  --font-family-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-family-title: 'KG Second Chances Solid', Georgia, serif;

  /* Text colors */
  --color-text-primary: #2D2D2D;
  --color-text-secondary: #6B6B6B;
}

/* Global typography - Poppins for body, KG Second Chances for headings */
body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'KG Second Chances Solid', Georgia, serif;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ================================
   Accessibility - Focus Visible Styles (WCAG 2.4.7)
   ================================ */

/* Global focus-visible outline for all interactive elements */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.dark :focus-visible {
  outline-color: #60a5fa;
}

/* Remove default outline when not using keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for buttons and links */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Form inputs focus-visible */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 0;
  border-color: #2563eb;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Classe pour marquer une option de reading comme sélectionnée */
.reading-option-selected {
  @apply border-2 border-accent-orange dark:border-accent-orange-light bg-accent-orange/20 dark:bg-accent-orange/30 text-accent-orange dark:text-accent-orange-light shadow-md ring-2 ring-accent-orange/30 dark:ring-accent-orange/50;
}

/* Blog post table styling - make tables more visible */
.prose table {
  @apply border-collapse w-full my-6;
}

.prose thead {
  @apply bg-slate-50 dark:bg-slate-800;
}

.prose th {
  @apply border border-slate-300 dark:border-slate-600 px-4 py-2 text-left font-semibold text-slate-900 dark:text-slate-100;
}

.prose td {
  @apply border border-slate-300 dark:border-slate-600 px-4 py-2 text-slate-700 dark:text-slate-300;
}

.prose tbody tr:hover {
  @apply bg-slate-50 dark:bg-slate-800/50;
}

.prose hr {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* Plus d'espace AVANT chaque sous-titre H2 */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family: 'KG Second Chances Solid', Georgia, serif;
}

.prose h2 {
    margin-top: 2.5rem;   /* augmente ou diminue à ton goût */
    margin-bottom: 1rem;
}

.prose h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* Force les bullet points dans les zones markdown */
.prose ul {
    list-style-type: disc !important;
    margin-left: 1.5rem;
}
.prose ol {
    list-style-type: decimal !important;
    margin-left: 1.5rem;
}

/* Dark mode text colors for prose content */
.dark .prose {
    color: #e2e8f0; /* slate-200 */
}

.dark .prose p,
.dark .prose li,
.dark .prose span {
    color: #e2e8f0; /* slate-200 */
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    color: #ffffff;
}

.dark .prose strong,
.dark .prose b {
    color: #ffffff;
}

.dark .prose blockquote {
    color: #94a3b8; /* slate-400 */
    border-left-color: var(--color-accent-orange);
}

.dark .prose code {
    color: #e2e8f0;
    background-color: #1e293b; /* slate-800 */
}

.dark .prose pre {
    background-color: #0f172a; /* slate-900 */
}

.dark .prose a {
    color: var(--color-accent-orange-light);
}

/* ================================
   Landing Page Styles (ImagiLab)
   ================================ */

/* Serif font for landing page titles */
.font-landing-serif {
  font-family: "KG Second Chances Solid", Georgia, serif;
}

/* Cream grid background */
.bg-cream-grid {
  background-color: #f8f4ed;
  background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  min-height: 100vh;
}

/* Landing page colors */
.bg-landing-cream { background-color: #f8f4ed; }
.bg-landing-dark { background-color: #2d2d2d; }
.bg-landing-peach { background-color: #e8c4a0; }
.bg-landing-pastel-blue { background-color: #b8e0e8; }
.bg-landing-pastel-green { background-color: #c8e6c0; }
.bg-landing-pastel-pink { background-color: #f0d0e8; }
.bg-landing-pastel-yellow { background-color: #f8e8c0; }

.text-landing-dark { color: #1a1a1a; }
.text-landing-orange { color: #f97316; }
.text-landing-muted { color: #666; }

.border-landing { border-color: #e5e0d8; }

/* Marquee animation */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 20s linear infinite;
}

/* Classes pour le responsive des graphiques TOEIC (générés dynamiquement en C#) */
/* Ces classes doivent être ici pour que Tailwind les génère */
.graphic-desktop { @apply max-sm:hidden; }
.graphic-mobile { @apply sm:hidden; }