/* Fractality product UI — tokens extracted from the validated Athéna prototype.
   Surfaces « Graphite », validées par Raph le 2026-10-16 : plus de contraste
   entre le cadre, la surface de travail, les champs et le texte secondaire
   (« trop blanc en clair, trop noir en sombre »). En sombre, la surface se
   soulève d'un cadre presque noir. */
:root {
  color-scheme: light;

  --fr-font-sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fr-font-weight-regular: 400;
  --fr-font-weight-medium: 500;
  --fr-font-weight-semibold: 600;

  --fr-color-ink: #10141b;
  --fr-color-muted: #545b67;
  --fr-color-faint: #858d99;
  --fr-color-line: rgba(30, 38, 50, 0.16);
  --fr-color-panel: #c3cad3;
  --fr-color-paper: rgba(250, 251, 252, 0.985);
  --fr-color-soft: rgba(222, 227, 233, 0.9);
  --fr-color-user: #dfe6f3;
  /* Le teal du thème sombre, repris en clair (2026-09-25), à la place du
     vert anis. L'accent profond est assombri pour rester lisible sur blanc. */
  --fr-color-accent: #35988c;
  --fr-color-accent-deep: #1d6f66;
  /* Le halo d'un passage retrouvé : l'accent du thème, très dilué. Il
     s'éteint seul, il n'a donc pas à tenir un contraste de lecture. */
  --fr-color-halo: rgba(53, 152, 140, 0.45);
  /* La plaque, elle, se pose SOUS du texte : très diluée, donc, et elle
     s'efface d'elle-même. */
  --fr-color-halo-soft: rgba(53, 152, 140, 0.14);
  --fr-color-stage: #c3cad3;
  --fr-color-send: #1d201d;
  --fr-color-send-hover: #090a09;

  --fr-app-background: linear-gradient(145deg, #dde2e7 0%, #c9d0d8 48%, #b7bfc9 100%);
  --fr-workspace-background: var(--fr-color-paper);
  --fr-workspace-border: rgba(255, 255, 255, 0.6);
  --fr-field-background: rgba(228, 232, 237, 0.98);
  --fr-card-background: rgba(228, 232, 237, 0.98);
  --fr-quote-background: rgba(246, 247, 244, 0.9);
  --fr-popover-background: rgba(255, 255, 255, 0.95);

  --fr-shadow-workspace: inset 0 1px 0 #fff, 0 18px 60px rgba(48, 58, 73, 0.055);
  --fr-shadow-popover: 0 24px 64px rgba(42, 50, 62, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.98);
  --fr-shadow-primary: 0 7px 20px rgba(45, 53, 65, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --fr-shadow-field: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 7px 24px rgba(51, 61, 76, 0.055);
  /* Le champ de saisie, celui du chat (décision de Raph du 2026-10-07, mise
     en jetons le 2026-10-18) : blanc, un filet gris très léger, une ombre à
     peine posée. La référence de TOUT champ, ligne ou zone, de chaque
     application. Aucun effet au survol ni au focus. */
  --fr-field-surface: #fff;
  --fr-field-border: rgba(45, 54, 68, 0.1);
  --fr-field-shadow: 0 1px 2px rgba(20, 26, 36, 0.04);
  --fr-color-placeholder: #a3a8a1;

  --fr-space-1: 4px;
  --fr-space-2: 8px;
  --fr-space-3: 10px;
  --fr-space-4: 14px;
  --fr-space-5: 18px;
  --fr-space-6: 24px;
  --fr-space-7: 28px;
  --fr-space-8: 32px;

  --fr-radius-action: 15px;
  --fr-radius-subaction: 11px;
  --fr-radius-message: 18px;
  --fr-radius-card: 17px;
  --fr-radius-quote: 14px;
  --fr-radius-menu: 20px;
  --fr-radius-workspace: 28px;
  --fr-radius-workspace-mobile: 19px;
  --fr-radius-pill: 999px;

  --fr-size-rail: 82px;
  --fr-size-rail-mobile: 58px;
  --fr-size-action: 42px;
  --fr-size-action-icon: 24px;
  --fr-size-composer: 570px;
  --fr-size-field: 46px;
  --fr-size-send: 44px;
  --fr-size-content: 760px;
  --fr-size-user-message: 620px;

  --fr-duration-fast: 160ms;
  --fr-duration-default: 180ms;
  --fr-duration-panel: 200ms;
  --fr-ease: ease;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --fr-color-ink: #f4f7fb;
  --fr-color-muted: #c2c9d3;
  --fr-color-faint: #8a95a5;
  --fr-color-line: rgba(210, 222, 240, 0.14);
  --fr-color-panel: #222832;
  --fr-color-paper: rgba(34, 40, 50, 0.985);
  --fr-color-soft: rgba(50, 58, 71, 0.9);
  --fr-color-user: #59626f;
  --fr-color-accent: #00665e;
  --fr-color-accent-deep: #35988c;
  --fr-color-halo: rgba(53, 152, 140, 0.5);
  --fr-color-halo-soft: rgba(53, 152, 140, 0.2);
  --fr-color-stage: #0b0e12;
  --fr-color-send: #edf2f8;
  --fr-color-send-hover: #ffffff;

  --fr-app-background: linear-gradient(145deg, #12161c 0%, #0d1015 52%, #090b0e 100%);
  --fr-workspace-background: linear-gradient(155deg, rgba(36, 42, 52, 0.99), rgba(31, 37, 46, 0.99));
  --fr-workspace-border: rgba(210, 224, 247, 0.12);
  --fr-field-background: rgba(46, 54, 67, 0.97);
  --fr-card-background: rgba(46, 54, 67, 0.98);
  --fr-quote-background: rgba(42, 46, 52, 0.94);
  --fr-popover-background: rgba(40, 47, 58, 0.97);

  --fr-shadow-workspace: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 80px rgba(0, 0, 0, 0.24);
  --fr-shadow-popover: 0 28px 72px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --fr-shadow-primary: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 8px 22px rgba(0, 0, 0, 0.2);
  --fr-shadow-field: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 9px 28px rgba(0, 0, 0, 0.16);
  --fr-field-surface: rgba(46, 54, 67, 0.97);
  --fr-field-border: rgba(224, 231, 241, 0.14);
  --fr-field-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  --fr-color-placeholder: #707b8b;
}