/* ---------------------------------------------------------------------------
 * Reef - couche de tokens (Tailwind v4, CSS-first)
 *
 * Trois etages, dans cet ordre, et le markup ne touche jamais qu'au troisieme :
 *   1. Palette brute      : --color-ink-*, --color-coral-*  (des noms de couleurs)
 *   2. Alias semantiques  : --color-background, --color-primary  (des roles)
 *   3. Utilitaires        : bg-background, text-primary  (ce que tu ecris)
 *
 * Rebrander le theme = editer l'etage 1. Rien d'autre ne bouge.
 *
 * --- Ce qui distingue Reef de son grand frere Aloha ------------------------
 * Aloha presente un produit : fond ocean vert, scene WebGL, aplats d'accroche.
 * Reef fait lire : la meme eau mais la nuit, un second accent aigue-marine au
 * lieu du lagon vert, et une echelle de titres qui laisse vivre le paragraphe
 * juste dessous. Meme maison, meme corail, meme grotesque d'affichage, autre
 * metier.
 *
 * Le neutre est FROID, et c'est une correction assumee.
 *
 * Il a d'abord ete chaud, brun sur papier creme, au motif qu'un blog en gris
 * pur "a l'air d'un document exporte". L'argument tient sur le papier et tombe
 * a l'ecran : la page entiere virait au beige, le corail y perdait son statut
 * d'accent (deux voisins chauds ne se distinguent plus) et le theme ne
 * ressemblait plus a la famille, qui est une famille d'eau. Un neutre bleute
 * fait exactement le travail qu'on demandait au brun, sans rien voler au
 * corail : il recule, et il laisse la seule couleur chaude de la page etre
 * celle qui compte.
 * ------------------------------------------------------------------------- */

@theme {
  /* --- Palette : Encre ---------------------------------------------------
   * Le noir de Reef est un bleu tres sombre, jamais un gris neutre et jamais
   * un brun : c'est de l'eau profonde, pas de la terre. La saturation monte a
   * mesure qu'on descend, ce qui donne un fond sombre allume de l'interieur
   * plutot qu'un fond eteint. */
  --color-ink-50: #f3f6fa;
  --color-ink-100: #e6ecf3;
  --color-ink-200: #ccd7e5;
  --color-ink-300: #a3b4ca;
  --color-ink-400: #758aa7;
  --color-ink-500: #526583;
  --color-ink-600: #3d4d67;
  --color-ink-700: #2e3b50;
  --color-ink-800: #1f2939;
  --color-ink-900: #141b27;
  --color-ink-950: #0a0f17;

  /* --- Palette : Papier --------------------------------------------------
   * Le fond du mode par defaut. Il porte une pointe de bleu, pas de jaune :
   * quelques points de teinte suffisent a poser le repos qu'on cherche, et ils
   * vont dans le meme sens que le reste du theme au lieu de le contredire. */
  --color-paper-50: #fbfcfe;
  --color-paper-100: #f2f5fa;
  --color-paper-200: #e4eaf3;

  /* --- Palette : Corail --------------------------------------------------
   * L'accent de la maison, commun aux cinq themes du catalogue. C'est le fil
   * qui dit qu'Aloha, Reef, Swell, Koa et Kai sortent du meme atelier. */
  --color-coral-50: #fff5f2;
  --color-coral-100: #ffe8e1;
  --color-coral-200: #ffd2c6;
  --color-coral-300: #ffb29d;
  --color-coral-400: #ff7a59;
  --color-coral-500: #f95c36;
  --color-coral-600: #e6411c;
  --color-coral-700: #c13314;
  --color-coral-800: #9d2d15;
  --color-coral-900: #822b18;

  /* --- Palette : Recif ---------------------------------------------------
   * Le second accent : une aigue-marine franche, plus bleue que le lagon
   * d'Aloha, qui est vert. Les deux themes sont voisins et doivent se
   * distinguer d'un coup d'oeil, pas apres comparaison.
   *
   * C'est LE primaire du theme depuis que le corail est repasse au rang
   * d'accent : boutons, filets de section, mot d'accent et sa vague. Jamais en
   * concurrence avec le corail sur un meme appel a l'action : une page qui a
   * deux couleurs d'action n'en a aucune. */
  --color-reef-300: #7fd8f0;
  --color-reef-400: #3fc0e0;
  --color-reef-500: #1a9fc4;
  --color-reef-600: #147ea0;

  /* --- Typographie -------------------------------------------------------
   * Deux polices chargees, pas une de plus : Space Grotesk pour l'affichage,
   * Instrument Sans pour le texte courant.
   *
   * Space Grotesk en affichage : une grotesque a terminaisons coupees, des
   * chiffres qui ont du caractere et une chasse serree qui tient les tres
   * grands titres sans se liquefier. Elle a une voix, contrairement aux
   * geometriques neutres.
   * Instrument Sans en corps : hauteur d'x genereuse, formes ouvertes,
   * dessinee pour l'ecran. C'est elle qu'on lit pendant huit minutes.
   *
   * Le mot d'accent des titres n'a PLUS de police a lui : il garde la police
   * du titre et porte une vague soulignee (--accent-wave, definie par mode
   * plus bas, pres du primaire). Plus aucune italique serif nulle part :
   * --font-serif et --font-script ne subsistent que comme alias du display,
   * pour le contenu qui les cite encore. */
  --font-display: "Space Grotesk Variable", "Space Grotesk", system-ui, sans-serif;
  --font-sans: "Instrument Sans Variable", "Instrument Sans", system-ui, sans-serif;
  --font-serif: var(--font-display);
  --font-script: var(--font-display);

  /* Echelle d'affichage FLUIDE (clamp). Resserree d'un cran par rapport a la
   * version serif : a corps egal, Space Grotesk occupe environ un dixieme de
   * largeur de plus que Fraunces, et sa hauteur d'x est plus haute. Garder les
   * anciennes valeurs faisait deborder les titres de trois mots sur une ligne
   * de plus. La chasse suit le meme mouvement : une grotesque encaisse une
   * chasse plus negative qu'une serif a fort contraste, qui, elle, se colle. */
  --text-display-sm: clamp(1.75rem, 1.4rem + 1.4vw, 2.35rem);
  --text-display-sm--line-height: 1.1;
  --text-display-sm--letter-spacing: -0.03em;
  --text-display-md: clamp(2.1rem, 1.55rem + 2.3vw, 3.2rem);
  --text-display-md--line-height: 1.04;
  --text-display-md--letter-spacing: -0.035em;
  --text-display-lg: clamp(2.45rem, 1.65rem + 3.4vw, 4.35rem);
  --text-display-lg--line-height: 1;
  --text-display-lg--letter-spacing: -0.04em;
  --text-display-xl: clamp(2.7rem, 1.65rem + 4.4vw, 5.5rem);
  --text-display-xl--line-height: 0.95;
  --text-display-xl--letter-spacing: -0.045em;

  /* Chasse optique : la chasse depend de la taille, jamais du composant. */
  --tracking-optique-xs: 0.014em;
  --tracking-optique-sm: 0.007em;
  --tracking-optique-lg: -0.012em;

  /* --- Rayons ------------------------------------------------------------
   * Reef arrondit moins qu'Aloha. Un blog trop arrondi fait application ; un
   * blog aux angles francs fait publication. Les boutons restent en pilule,
   * c'est la signature de la maison. */
  --radius-card: 0.875rem;
  --radius-panel: 1.25rem;
  --radius-pill: 999px;

  /* --- Mesure ------------------------------------------------------------
   * La largeur de la colonne de lecture, en caracteres et pas en pixels :
   * c'est le nombre de signes par ligne qui fatigue, pas la largeur d'ecran.
   * 68ch est le point ou la ligne reste confortable sans devenir hachee. */
  --measure-prose: 68ch;
  --measure-wide: 82ch;

  /* --- Animations --------------------------------------------------------- */
  --animate-rise: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-marquee: marquee 38s linear infinite;
  --animate-pulse-slow: pulse-slow 4s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
 * Etage 2 : les alias semantiques.
 * Le markup ecrit bg-background / text-foreground / bg-primary, et ne connait
 * ni "ink" ni "coral". Le mode sombre ne fait que reaffecter ces variables.
 * ------------------------------------------------------------------------- */
@theme inline {
  --color-background: var(--reef-background);
  --color-foreground: var(--reef-foreground);
  --color-muted: var(--reef-muted);
  --color-muted-foreground: var(--reef-muted-foreground);
  --color-card: var(--reef-card);
  --color-card-foreground: var(--reef-card-foreground);
  --color-primary: var(--reef-primary);
  --color-primary-foreground: var(--reef-primary-foreground);
  --color-accent: var(--reef-accent);
  --color-accent-text: var(--reef-accent-text);
  --color-accent-foreground: var(--reef-accent-foreground);
  --color-border: var(--reef-border);
  --color-ring: var(--reef-ring);
  --color-surface: var(--reef-surface);
  /* Le voile des superpositions. Il a besoin d'un alias a lui : les primitives
   * partagees entre les themes de la maison ne doivent jamais citer le nom
   * d'une couleur de marque, sinon elles cessent d'etre portables. */
  --color-scrim: var(--reef-scrim);

  /* Les ombres passent par inline, donc par var() : c'est la seule facon
   * qu'elles ont de changer entre le clair et le sombre. Tailwind v4 fige les
   * valeurs declarees dans @theme au moment du build. */
  --shadow-float: var(--reef-shadow-float);
  --shadow-lift: var(--reef-shadow-lift);
  --shadow-glass: var(--reef-shadow-glass);
}

:root {
  --reef-background: var(--color-paper-50);
  --reef-foreground: var(--color-ink-950);
  --reef-muted: var(--color-paper-100);
  --reef-muted-foreground: var(--color-ink-600);
  --reef-card: #ffffff;
  --reef-card-foreground: var(--color-ink-950);
  /* LE PRIMAIRE EST LE TURQUOISE DE LA MAISON, PLUS LE CORAIL.
   *
   * Les deux etaient inverses : le corail portait tous les boutons, tous les
   * filets de section, le mot d'accent et sa vague, et le turquoise ne servait
   * qu'aux pastilles de sujet. Une page entiere en orange chaud, c'est la
   * teinte que le public associe aux pages generees, et le reproche est arrive
   * de l'exterieur. Le turquoise, lui, est la couleur de la maison : c'est
   * celle du second trait du logo, sur alohapixel.app comme ici.
   *
   * Le corail ne disparait pas, il redevient ce qu'un accent doit etre : rare.
   * Un seul appel a l'action par ecran garde donc une couleur, et ce n'est
   * plus la meme que le reste de la page.
   *
   * Turquoise 600 et non 500 en mode clair : le texte des boutons est blanc,
   * et 500 le fait passer sous le rapport de contraste de 4,5. */
  /* Quatre variables --halo-* vivaient ici : les couleurs des disques floutes
     des couvertures. Les disques ont ete retires le 2 septembre 2026, avec
     toutes les lueurs de la famille, et les variables partent avec eux. Une
     variable de couleur sans lecteur finit toujours par en retrouver un. */

  --reef-primary: var(--color-reef-600);
  --reef-primary-foreground: #ffffff;
  /* La vague du mot d'accent (.accent-script) : le trait de la marque (le logo
   * est une vague), dessine dans le turquoise du primaire. Le primaire change
   * entre les modes, donc une vague par mode : turquoise 600 ici,
   * turquoise 400 en sombre. */
  --accent-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q 6 2.5 12 7 T 24 7 T 36 7 T 48 7' fill='none' stroke='%23147ea0' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --reef-accent: var(--color-coral-600);
  /* L'accent QUAND IL PORTE DU TEXTE, et rien d'autre.
   *
   * Le corail de la maison est fait pour se voir : sur un fond clair il plafonne
   * a 2,6 - 3,7 pour 1 face au blanc et aux fonds pales, la ou WCAG AA demande
   * 4,5 pour du texte courant. Mesure sur les six themes, 188 occurrences.
   *
   * Deux facons de repondre. Changer l'accent, et le theme perd sa couleur.
   * Ou separer les deux emplois : la couleur DECORATIVE ne bouge pas d'un
   * pixel (bg-accent, border-accent, les degrades, la vague du titre), et le
   * TEXTE en accent prend une marche plus sombre de la MEME rampe. C'est le
   * second choix, parce qu'un lecteur ne doit pas avoir a deviner un mot.
   *
   * En sombre la question ne se pose pas : l'accent y est deja entre 5,2 et
   * 7,1 pour 1. Le bloc sombre renvoie donc simplement vers l'accent. */
  --reef-accent-text: var(--color-coral-700);
  --reef-accent-foreground: #ffffff;
  --reef-border: color-mix(in oklab, var(--color-ink-950) 12%, transparent);
  --reef-ring: var(--color-reef-600);
  --reef-surface: var(--color-paper-100);
  --reef-scrim: var(--color-ink-950);

  /* En clair, une ombre portee suffit, teintee de l'encre du theme et jamais
   * noire : une ombre neutre sur un fond bleute le grise, et la page perd le
   * peu de teinte qui la relie au reste de la maison. Les trois valeurs
   * derivent de --color-ink-950 (10 15 23), pas d'un gris trouve au hasard. */
  --reef-shadow-float: 0 1px 2px rgb(10 15 23 / 0.05), 0 6px 20px -6px rgb(10 15 23 / 0.12);
  --reef-shadow-lift:
    0 2px 4px rgb(10 15 23 / 0.06), 0 18px 40px -14px rgb(10 15 23 / 0.22),
    0 20px 50px -22px rgb(20 126 160 / 0.18);
  --reef-shadow-glass:
    0 1px 0 0 rgb(255 255 255 / 0.5) inset, 0 10px 34px -10px rgb(10 15 23 / 0.24);
}

.dark {
  --reef-background: var(--color-ink-950);
  --reef-foreground: var(--color-paper-50);
  --reef-muted: var(--color-ink-900);
  --reef-muted-foreground: var(--color-ink-300);
  --reef-card: color-mix(in oklab, var(--color-ink-900) 80%, transparent);
  --reef-card-foreground: var(--color-paper-50);
  --reef-primary: var(--color-reef-400);
  --reef-primary-foreground: var(--color-ink-950);
  /* Le primaire passe en turquoise 400 : la vague du mot d'accent suit. */
  --accent-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 10' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q 6 2.5 12 7 T 24 7 T 36 7 T 48 7' fill='none' stroke='%233fc0e0' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --reef-accent: var(--color-coral-400);
  /* En sombre, l'accent passe deja largement AA sur les trois fonds : le texte
   * en accent garde donc exactement la couleur de l'accent. */
  --reef-accent-text: var(--reef-accent);
  --reef-accent-foreground: var(--color-ink-950);
  --reef-border: color-mix(in oklab, var(--color-paper-50) 15%, transparent);
  --reef-ring: var(--color-reef-400);
  --reef-surface: var(--color-ink-900);
  --reef-scrim: var(--color-ink-950);

  /* --- Direction artistique du sombre -------------------------------------
   * Basculer les couleurs ne suffit pas. Une ombre portee ne se voit pas sur
   * du sombre : elle assombrit un fond deja sombre et la carte cesse de
   * flotter. Le sombre demande d'autres outils : bordures lumineuses, lueurs
   * internes, halos plus satures et moins etendus. C'est ce qui separe "un
   * theme avec un interrupteur" de "deux themes en un". */
  --reef-shadow-float:
    0 0 0 1px color-mix(in oklab, var(--color-paper-50) 8%, transparent),
    0 1px 0 0 color-mix(in oklab, var(--color-paper-50) 7%, transparent) inset,
    0 14px 36px -18px rgb(0 0 0 / 0.7);
  --reef-shadow-lift:
    0 0 0 1px color-mix(in oklab, var(--color-reef-400) 24%, transparent),
    0 1px 0 0 color-mix(in oklab, var(--color-paper-50) 10%, transparent) inset,
    0 22px 58px -24px color-mix(in oklab, var(--color-reef-400) 30%, transparent),
    0 18px 46px -22px rgb(0 0 0 / 0.75);
  --reef-shadow-glass:
    0 1px 0 0 rgb(255 255 255 / 0.09) inset,
    0 0 0 1px color-mix(in oklab, var(--color-paper-50) 9%, transparent),
    0 14px 44px -16px rgb(0 0 0 / 0.6);
}

/* Les images sont eclatantes sur fond clair et criardes sur fond sombre : un
 * demi-ton de saturation en moins et un voile de la couleur de fond les font
 * appartenir a la page au lieu d'y etre posees. */
.dark img:not([data-no-dim]),
.dark video:not([data-no-dim]) {
  filter: saturate(0.92) brightness(0.96);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
