/* Fractality product UI — tokens extracted from the validated Athéna prototype. */
: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: #181c24;
  --fr-color-muted: #727985;
  --fr-color-faint: #a3a9b2;
  --fr-color-line: rgba(45, 54, 68, 0.09);
  --fr-color-panel: #e2e6eb;
  --fr-color-paper: rgba(252, 252, 253, 0.965);
  --fr-color-soft: rgba(232, 236, 240, 0.82);
  --fr-color-user: #e9eef9;
  --fr-color-accent: #9ada55;
  --fr-color-accent-deep: #426b25;
  /* 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(154, 218, 85, 0.5);
  /* 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(154, 218, 85, 0.17);
  --fr-color-stage: #e1e5ea;
  --fr-color-send: #1d201d;
  --fr-color-send-hover: #090a09;

  --fr-app-background: linear-gradient(145deg, #f5f7f9 0%, #e7eaee 48%, #d6dbe0 100%);
  --fr-workspace-background: var(--fr-color-paper);
  --fr-workspace-border: rgba(255, 255, 255, 0.92);
  --fr-field-background: rgba(235, 238, 243, 0.9);
  --fr-card-background: rgba(235, 238, 243, 0.94);
  --fr-quote-background: rgba(246, 247, 244, 0.9);
  --fr-popover-background: rgba(246, 248, 250, 0.94);

  --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);

  --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: #eef2f7;
  --fr-color-muted: #a7b0bd;
  --fr-color-faint: #6f7a8a;
  --fr-color-line: rgba(202, 216, 239, 0.075);
  --fr-color-panel: #171c23;
  --fr-color-paper: rgba(16, 20, 26, 0.975);
  --fr-color-soft: rgba(29, 35, 44, 0.9);
  --fr-color-user: #444b55;
  --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: #090c10;
  --fr-color-send: #edf2f8;
  --fr-color-send-hover: #ffffff;

  --fr-app-background:
    radial-gradient(circle at 4% 96%, rgba(80, 101, 139, 0.16), transparent 30%),
    radial-gradient(circle at 96% 3%, rgba(91, 117, 169, 0.11), transparent 27%),
    linear-gradient(145deg, #1a2029 0%, #11161d 52%, #0b0f14 100%);
  --fr-workspace-background: linear-gradient(155deg, rgba(19, 23, 30, 0.985), rgba(13, 16, 22, 0.99));
  --fr-workspace-border: rgba(210, 224, 247, 0.075);
  --fr-field-background: rgba(27, 33, 42, 0.96);
  --fr-card-background: rgba(27, 33, 42, 0.97);
  --fr-quote-background: rgba(42, 46, 52, 0.94);
  --fr-popover-background: rgba(22, 27, 35, 0.965);

  --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);
}