@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

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

/* ---------------------------------------------------------------------------
   Identité seoinsight — tout se joue ici.

   Un seul endroit décide de la peau de l'application : les écrans ne portent
   aucune couleur, aucune police, aucun rayon en dur, ils lisent ces tokens.
   Un rendu qui doit changer partout est un token ; jamais une règle locale
   dans un composant.

   La direction est **sombre d'abord** : les fonds ne sont pas des gris neutres
   mais des teals très désaturés, sur la teinte 175 — celle de la marque — pour
   que le turquoise d'accent se pose sur sa propre famille et non sur un gris
   étranger. Toute la grille tient sur cette seule teinte : la maquette dérivait
   de 184° à 172° selon les nuances, on l'a normalisée. L'écart visuel est nul
   (moins d'une unité par canal sur les fonds) et le système devient déclinable.
   --------------------------------------------------------------------------- */

@theme inline {
  /* Familles typographiques. `inline` recopie littéralement `var(--font-…)`
     dans les utilitaires : les valeurs réelles vivent dans `:root`, donc elles
     restent lisibles en CSS brut (l'utilitaire `num` en dépend). */
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);
  /* Tout ce qui passe en mono s'aligne en colonne sans qu'aucun écran n'ait à
     y penser : c'est ce qui tient les colonnes de volumes. */
  --font-mono--font-feature-settings: "tnum" 1;

  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  /* Filets internes (lignes de table, séparateurs dans une carte) : plus
     discrets que le contour d'un bloc. */
  --color-border-subtle: var(--border-subtle);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  /* Troisième niveau de texte, sous `muted` : en-têtes de colonnes, légendes,
     unités. Au-dessus de 4.5:1 dans les deux thèmes. */
  --color-foreground-faint: var(--foreground-faint);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  --color-spinner: var(--spinner);

  /* La marque, déclinée : l'aplat, l'encre qu'on pose dessus, la version
     lisible en texte, et le voile pour les fonds actifs. */
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-brand-text: var(--brand-text);
  --color-brand-surface: var(--brand-surface);

  /* --- Statuts -----------------------------------------------------------
     Quatre états, toujours par paire : une couleur de texte saturée et un fond
     très transparent. C'est le couple à utiliser pour un badge d'état —
     `bg-status-ok-surface text-status-ok` — jamais l'aplat plein, qui reste
     réservé aux actions (voir la note « un seul vert » plus bas). */
  --color-status-ok: var(--status-ok);
  --color-status-ok-surface: var(--status-ok-surface);
  --color-status-pending: var(--status-pending);
  --color-status-pending-surface: var(--status-pending-surface);
  --color-status-error: var(--status-error);
  --color-status-error-surface: var(--status-error-surface);
  --color-status-idle: var(--status-idle);
  --color-status-idle-surface: var(--status-idle-surface);

  /* Les deux couleurs sémantiques secondaires. Elles distinguent des
     catégories (intentions de recherche) ; la correspondance catégorie ↔
     couleur appartient à la feature, pas au thème, d'où le nom par teinte. */
  --color-category-violet: var(--category-violet);
  --color-category-violet-surface: var(--category-violet-surface);
  --color-category-blue: var(--category-blue);
  --color-category-blue-surface: var(--category-blue-surface);

  /* Rayons contenus : c'est un outil de données, pas une landing page.
     Les contrôles de base-nova sont en `rounded-lg` → 8 px ; les cartes en
     `rounded-xl` → 12 px ; les flottants (popover, menu) en `rounded-lg` → 8 px.
     Rien n'est bulleux, rien n'est carré. */
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.5);
  --radius-2xl: calc(var(--radius) * 2);
  --radius-3xl: calc(var(--radius) * 2.5);
  --radius-4xl: calc(var(--radius) * 3);

  /* Pas de grande ombre portée : la hiérarchie vient du fond et de la bordure.
     Les ombres ne servent plus qu'à décoller un flottant de son support, et
     leur couleur suit le thème (`--shadow-color`). */
  --shadow-2xs: 0 1px 1px var(--shadow-color);
  --shadow-xs: 0 1px 2px var(--shadow-color);
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 10px var(--shadow-color);
  --shadow-lg: 0 8px 20px var(--shadow-color);
  --shadow-xl: 0 12px 28px var(--shadow-color);
  --shadow-2xl: 0 18px 40px var(--shadow-color);
}

:root {
  /* --- Typographie -------------------------------------------------------
     Space Grotesk pour les titres, Instrument Sans pour l'interface,
     JetBrains Mono pour les chiffres. Les trois sont chargées par
     `next/font/google` dans `app/layout.tsx`, qui pose les variables
     `--font-*` sur `<html>` ; les replis ont des métriques proches pour que
     la bascule police système → police chargée ne déplace rien. */
  --font-sans:
    var(--font-instrument-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-space-grotesk), var(--font-sans);
  --font-mono:
    var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- La marque ---------------------------------------------------------
     `--spinner` était déjà ce turquoise, posé pour le travail en cours ; il est
     promu couleur de marque unique. Il n'est écrit qu'une fois, ici, et tout le
     reste en dérive : primaire, focus, sélection, nav active, succès.
     Il ne change PAS d'un thème à l'autre — le bouton primaire est le même
     objet partout — et son encre est toujours très sombre, jamais blanche. */
  --spinner: #00d4b2;
  --brand: var(--spinner);
  --brand-foreground: oklch(0.166 0.017 175);

  --radius: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Thème clair — la même identité retournée : fonds blancs très légèrement
   teal, encres sombres teal. Ce n'est pas du shadcn de série repeint, c'est la
   déclinaison claire de la grille sombre — mêmes teintes, lightness miroir,
   mêmes rôles.
   --------------------------------------------------------------------------- */
:root {
  --background: oklch(0.98 0.004 175);
  --foreground: oklch(0.215 0.019 175);
  --card: oklch(0.998 0.001 175);
  --card-foreground: var(--foreground);
  --popover: oklch(0.998 0.001 175);
  --popover-foreground: var(--foreground);
  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
  --secondary: oklch(0.955 0.009 175);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.955 0.009 175);
  --muted-foreground: oklch(0.5 0.024 175);
  --foreground-faint: oklch(0.545 0.023 175);
  --accent: oklch(0.93 0.013 175);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.52 0.2 25);
  --border: oklch(0.885 0.016 175);
  --border-subtle: oklch(0.93 0.011 175);
  --input: oklch(0.912 0.012 175);
  --ring: var(--brand-text);

  /* Sur blanc, le turquoise plein n'a pas la densité qu'il faut pour porter du
     texte : la version « texte » de la marque est assombrie (4.6:1). En sombre
     elle redevient la marque elle-même. */
  --brand-text: oklch(0.53 0.115 175.5);
  --brand-surface: oklch(0.53 0.115 175.5 / 0.12);

  --status-ok: var(--brand-text);
  --status-ok-surface: var(--brand-surface);
  --status-pending: oklch(0.545 0.115 70);
  --status-pending-surface: oklch(0.545 0.115 70 / 0.12);
  --status-error: var(--destructive);
  --status-error-surface: oklch(0.52 0.2 25 / 0.1);
  --status-idle: var(--muted-foreground);
  --status-idle-surface: oklch(0.5 0.024 175 / 0.09);

  --category-violet: oklch(0.51 0.19 294);
  --category-violet-surface: oklch(0.51 0.19 294 / 0.1);
  --category-blue: oklch(0.52 0.16 256);
  --category-blue-surface: oklch(0.52 0.16 256 / 0.1);

  /* Cinq séries qui balaient le froid, de la marque au violet, sans jamais
     croiser l'ambre (réservé à l'attente) ni le rouge (réservé à l'échec). */
  --chart-1: oklch(0.585 0.125 175);
  --chart-2: oklch(0.56 0.15 256);
  --chart-3: oklch(0.54 0.185 294);
  --chart-4: oklch(0.58 0.135 145);
  --chart-5: oklch(0.61 0.11 200);

  --shadow-color: oklch(0.3 0.03 175 / 0.1);

  --sidebar: oklch(0.965 0.007 175);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: var(--brand-foreground);
  --sidebar-accent: var(--brand-surface);
  --sidebar-accent-foreground: var(--brand-text);
  --sidebar-border: var(--border-subtle);
  --sidebar-ring: var(--brand-text);
}

/* ---------------------------------------------------------------------------
   Thème sombre — le défaut de l'application.
   Trois fonds seulement, du plus profond au plus élevé, tous sur la teinte 175 :
   le sol (`background`, et la sidebar qui affleure avec lui), la carte, le
   flottant. Au-dessus, une bordure. Rien d'autre ne crée de la profondeur.
   --------------------------------------------------------------------------- */
.dark {
  --background: oklch(0.175 0.01 175);
  --foreground: oklch(0.95 0.011 175);
  --card: oklch(0.205 0.013 175);
  --card-foreground: var(--foreground);
  --popover: oklch(0.233 0.016 175);
  --popover-foreground: var(--foreground);
  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
  --secondary: oklch(0.233 0.016 175);
  --secondary-foreground: var(--foreground);
  --muted: oklch(0.233 0.016 175);
  --muted-foreground: oklch(0.745 0.026 175);
  --foreground-faint: oklch(0.6 0.026 175);
  --accent: oklch(0.263 0.019 175);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.68 0.185 25);
  --border: oklch(0.294 0.022 175);
  --border-subtle: oklch(0.256 0.018 175);
  --input: oklch(0.3 0.022 175);
  --ring: var(--brand-text);

  --brand-text: var(--brand);
  --brand-surface: oklch(0.777 0.146 175.5 / 0.16);

  --status-ok: var(--brand-text);
  --status-ok-surface: var(--brand-surface);
  --status-pending: oklch(0.79 0.13 79);
  --status-pending-surface: oklch(0.79 0.13 79 / 0.16);
  --status-error: var(--destructive);
  --status-error-surface: oklch(0.68 0.185 25 / 0.18);
  --status-idle: var(--muted-foreground);
  --status-idle-surface: oklch(0.745 0.026 175 / 0.12);

  --category-violet: oklch(0.72 0.15 294);
  --category-violet-surface: oklch(0.72 0.15 294 / 0.16);
  --category-blue: oklch(0.72 0.135 256);
  --category-blue-surface: oklch(0.72 0.135 256 / 0.16);

  --chart-1: oklch(0.777 0.146 175);
  --chart-2: oklch(0.72 0.135 256);
  --chart-3: oklch(0.72 0.15 294);
  --chart-4: oklch(0.78 0.14 145);
  --chart-5: oklch(0.85 0.09 200);

  --shadow-color: oklch(0.08 0.02 175 / 0.55);

  --sidebar: var(--background);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--brand);
  --sidebar-primary-foreground: var(--brand-foreground);
  --sidebar-accent: var(--brand-surface);
  --sidebar-accent-foreground: var(--brand-text);
  --sidebar-border: var(--border-subtle);
  --sidebar-ring: var(--brand-text);
}

/* ---------------------------------------------------------------------------
   Un seul vert, deux traitements — décision assumée.

   `#00D4B2` est déjà un vert-cyan. Lui adjoindre un émeraude « de succès »
   donnerait deux verts voisins que personne ne lit comme deux sens : on lirait
   juste une palette mal tenue. Le succès reprend donc la marque, et ce qui
   sépare une **action** d'un **état** n'est pas la teinte mais le traitement :

     action principale  → aplat plein      `bg-primary text-primary-foreground`
     état « connecté »  → voile + texte    `bg-status-ok-surface text-status-ok`

   Cette grammaire est la même pour les quatre statuts (elle existe déjà dans
   base-nova pour `destructive`), donc un badge d'état ne peut jamais être
   confondu avec un bouton, quelle que soit sa couleur.
   L'ambre, lui, ne sort jamais de l'attente : ni difficulté, ni avertissement
   générique, ni série de graphique.
   --------------------------------------------------------------------------- */

/* Un chiffre destiné à être comparé ou aligné porte cette classe : mono, chasse
   fixe, chiffres tabulaires. C'est le seul moyen d'écrire un nombre dans
   l'application — pas de `font-mono tabular-nums` recopié écran par écran. */
@utility num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
  /* Les titres prennent Space Grotesk partout, sans qu'un écran ait à poser
     `font-heading` ; les composants qui le posent déjà (Card, Dialog, Sheet)
     tombent sur la même famille. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
  }
  /* Les filets internes d'un tableau se lisent plus bas que le contour du bloc
     qui les contient : une ligne de données n'est pas une frontière. Règle
     d'élément, donc toute table de l'application en hérite ; une classe
     `border-*` posée sur une ligne reste prioritaire. */
  tr {
    border-color: var(--border-subtle);
  }
  ::selection {
    background-color: var(--brand-surface);
  }
}