/*
 * Tokens visuels Hivly — source unique partagée par la PWA et les iframes MCP.
 *
 * Identité "abeille": la crème porte les fonds, le quasi-noir porte le texte
 * et les contours de contrôle, le miel porte l'action, la prairie porte les
 * états positifs (visite, colonie saine). Le rouge ne sert qu'à l'alerte.
 *
 * Tous les couples texte/fond ci-dessous tiennent 4.5:1 minimum, et les
 * contours de contrôle 3:1 (WCAG 2.2 AA). `tokens.test.mjs` les recalcule:
 * modifier une couleur sans mettre à jour le ratio annoté à côté fait échouer
 * le gate, et le ratio annoté n'est donc jamais un souvenir.
 */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Surfaces — neutres et franches: la page se détache du fond, la carte
     de la page. Aucune teinte de papier: le carnet est connecté, pas imprimé
     (ADR 0030). */
  --color-surface: #f4f3f0;
  --color-panel: #ffffff;
  --color-panel-soft: #fbfaf8;

  /* Texte */
  --color-text: #16151a;           /* 18.16:1 sur panneau */
  --color-muted: #5d574f;          /*  7.14:1 sur panneau */

  /* Traits */
  --color-border: #e6e3dd;         /* décoratif, séparateurs */
  --color-border-strong: #16151a;  /* contours de contrôle */

  /* Miel — la couleur de l'assistant, et rien d'autre.
     Une surface miel dit « l'assistant attend quelque chose de toi »: un
     brouillon à confirmer, un suivi échu, un traitement à retirer. Elle ne
     porte ni onglet, ni jauge, ni liseré, ni point de graphe (ADR 0030). */
  --color-accent-honey: #ffb627;
  --color-accent-honey-strong: #e09400;
  --color-accent-honey-deep: #7a5c12;  /* 6.24:1 — texte et liens */
  --color-accent-honey-soft: #fff6e3;
  --color-on-honey: #16151a;           /* 10.35:1 sur miel */

  /* Prairie — succès, colonie saine, visite */
  --color-accent-leaf: #17914b;
  --color-accent-leaf-deep: #136b36;   /* 6.60:1 */
  --color-accent-leaf-soft: #e8f7ee;

  /* Alerte — orpheline, refus */
  --color-danger: #c0342a;
  --color-danger-deep: #a52a20;        /* 7.11:1 */
  --color-danger-soft: #fdecea;

  /* Structure secondaire */
  --color-accent-earth: #7d6f60;

  /* Séries de données — couvain, miel, pollen d'un cadre.
     Elles ne sont pas l'action: une barre de remplissage n'appelle aucun
     geste, et elle ne doit donc pas emprunter le miel de l'assistant. */
  --color-data-brood: #7d6f60;
  --color-data-honey: #f0a91b;
  --color-data-pollen: #ffd97a;

  /* Rayons — l'hexagone impose des angles francs, on reste discret */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgb(22 21 26 / 6%), 0 6px 16px -6px rgb(22 21 26 / 12%);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Plus Jakarta Sans porte tout le texte, titres compris — en graisse haute
     et chasse resserrée plutôt qu'en changeant de fonte. Il n'y a donc pas de
     fonte d'affichage: un token qui aurait valu celui-ci n'aurait rien appris
     à qui lit la feuille, et aurait laissé croire qu'on peut changer la fonte
     des titres sans toucher au reste.
     JetBrains Mono porte ce qui est *donnée*: mesures, dates, heures, numéros
     de lot, emplacements. C'est ce qui donne au carnet son air d'instrument
     relié, et ça sert: une colonne de mesures s'aligne d'une carte à l'autre. */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Surfaces sombres neutres: le miel à basse luminosité *est* du marron, et
       deux retours d'usage l'ont écarté. La chaleur vient des accents, pas du
       fond; ce qui détache les panneaux, c'est le contour et l'élévation. */
    --color-surface: #0c0c0e;
    --color-panel: #17171a;
    --color-panel-soft: #131316;

    --color-text: #f4f2ee;        /* 16.00:1 sur panneau */
    --color-muted: #b4ada4;       /*  8.05:1 sur panneau */

    --color-border: #27272c;      /* décoratif */
    --color-border-strong: #8f8c84; /* 5.33:1 sur panneau */

    --color-accent-honey: #ffb627;
    --color-accent-honey-strong: #ffc24d;
    --color-accent-honey-deep: #ffc85c;  /* 11.64:1 sur panneau, 9.99:1 sur --color-accent-honey-soft */
    --color-accent-honey-soft: #2c2413;  /* une teinte, pas un aplat: petite surface seulement */
    --color-on-honey: #16151a;           /* 10.35:1 sur miel */
  
    --color-accent-leaf: #4ecb83;
    --color-accent-leaf-deep: #5ed98c;   /* 10.03:1 sur panneau, 8.65:1 sur --color-accent-leaf-soft */
    --color-accent-leaf-soft: #13291d;

    --color-danger: #ff8a80;
    --color-danger-deep: #ff8a80;        /* 7.84:1 sur panneau, 7.15:1 sur --color-danger-soft */
    --color-danger-soft: #2e1b19;

    --color-accent-earth: #b9a98c;

    --shadow-soft: 0 1px 2px rgb(0 0 0 / 50%), 0 8px 24px -8px rgb(0 0 0 / 60%);
  }
}

/* Le même jeu, quand un hôte impose le sombre alors que le système est
   clair: une vue MCP Apps reçoit le thème de l'hôte (Claude, ChatGPT) et le
   pose en `data-theme`. Les déclarations sont celles du bloc au-dessus, à
   l'identique — un test le vérifie, parce qu'un media query et un attribut
   ne peuvent pas partager un bloc. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces sombres neutres: le miel à basse luminosité *est* du marron, et
     deux retours d'usage l'ont écarté. La chaleur vient des accents, pas du
     fond; ce qui détache les panneaux, c'est le contour et l'élévation. */
  --color-surface: #0c0c0e;
  --color-panel: #17171a;
  --color-panel-soft: #131316;

  --color-text: #f4f2ee;        /* 16.00:1 sur panneau */
  --color-muted: #b4ada4;       /*  8.05:1 sur panneau */

  --color-border: #27272c;      /* décoratif */
  --color-border-strong: #8f8c84; /* 5.33:1 sur panneau */

  --color-accent-honey: #ffb627;
  --color-accent-honey-strong: #ffc24d;
  --color-accent-honey-deep: #ffc85c;  /* 11.64:1 sur panneau, 9.99:1 sur --color-accent-honey-soft */
  --color-accent-honey-soft: #2c2413;  /* une teinte, pas un aplat: petite surface seulement */
  --color-on-honey: #16151a;           /* 10.35:1 sur miel */

  --color-accent-leaf: #4ecb83;
  --color-accent-leaf-deep: #5ed98c;   /* 10.03:1 sur panneau, 8.65:1 sur --color-accent-leaf-soft */
  --color-accent-leaf-soft: #13291d;

  --color-danger: #ff8a80;
  --color-danger-deep: #ff8a80;        /* 7.84:1 sur panneau, 7.15:1 sur --color-danger-soft */
  --color-danger-soft: #2e1b19;

  --color-accent-earth: #b9a98c;

  --shadow-soft: 0 1px 2px rgb(0 0 0 / 50%), 0 8px 24px -8px rgb(0 0 0 / 60%);
}

/* Réglages partagés, pour que PWA et iframes partent du même socle. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-surface);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Filet de sécurité contre les débordements horizontaux: une donnée
   utilisateur (nom de ruche, lignée, notes...) peut contenir un mot sans
   espace plus large que sa boîte. Sans ça, ce mot pousse son conteneur — et
   potentiellement toute la mise en page, dans une grille dont les tracks ne
   sont pas explicitement bornés — au lieu de se faire couper sur place. */
* {
  overflow-wrap: break-word;
}

:where(button, a, input, select, textarea) {
  font: inherit;
}

:where(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--color-accent-honey-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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