/* Design tokens of the screens: every colour, font, size, radius, shadow and spacing,
   defined once, with the values of the FiduAdvisor design system (CorExperts direction:
   warm paper, deep navy, sky blue accent, Fraunces titles, Inter Tight text).
   The components of app.css use them only (never a colour of their own), so applying a
   charter means changing the values below, then the components of app.css if the shapes
   change too; the templates stay as they are.
   Every text colour is checked against its background by tests/test_static.py
   (WCAG AA: 4.5:1 for a text, 3:1 for a border or the focus outline). The design system
   rules hold: sky is never a text on a light background, gold neither, a state is never
   said by its colour alone, the border of a field is `control`.
   This file holds the :root block only: tests/test_static.py refuses a colour written
   anywhere else in app/static. */

:root {
  /* Cabinet brand: the navy of the design system by default, replaced by base.html with
     the colour of the cabinet (tenants.config, branding.primary_color) and its text
     colour, black or white (app/web/contrast.py). It paints the navigation bar. */
  --brand: #0e1d3f;
  --on-brand: #ffffff;

  /* Texts: navy on the light backgrounds, secondary text, navy of the dark areas on hover */
  --ink: #0e1d3f;
  --ink-2: #1a2a55;
  --ink-soft: #4a5778;

  /* Sky blue: an accent only (link underline, rule, hover, bar of a banner), never a
     text on a light background; sky-2 on the navy (focus ring of the navigation bar);
     sky-soft is a very light background (question, current conversation, banner, marker
     of a citation), its text is `ink` */
  --sky: #53b9ea;
  --sky-2: #7ccbf0;
  --sky-soft: #e8f4fb;

  /* Gold: rare accent (editorial quotation, separator), never a text */
  --gold: #b8935a;

  /* Backgrounds: the page, the alternate sections and a hovered entry, the cards */
  --paper: #fbfaf6;
  --paper-2: #f4f1ea;
  --white: #ffffff;

  /* Borders: discreet (cards, panels), marked (editorial rules, list separators) */
  --line: #e5e2d8;
  --line-strong: #c9c4b5;
  /* Border of the input fields, 3:1 at least on white (WCAG 1.4.11) */
  --control: #4a5778;

  /* Keyboard focus ring: 3 px, on paper, white and sky-soft */
  --focus: #0e1d3f;

  /* States: a short text or a bar on its background (always with a word, never colour
     alone). Success as a colour is for icons, bars and large texts; a success text
     takes success-text. Warning is not in the design system: kept for the banners and
     notices that existed before it. */
  --danger: #c44545;
  --danger-soft: #fdecea;
  --success: #2f8f5b;
  --success-text: #1f6b36;
  --success-soft: #e3f4e8;
  --warning: #8a5a00;
  --warning-soft: #fff8e6;

  /* Fonts: titles in Fraunces, the rest in Inter Tight, both hosted (app/static/fonts) */
  --font-serif: Fraunces, Georgia, "Times New Roman", serif;
  --font-sans: "Inter Tight", system-ui, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  --weight-title: 500;
  --weight-strong: 600;
  --leading-body: 1.6;
  --leading-title: 1.1;
  --tracking-title: -0.02em;
  --tracking-eyebrow: 0.18em;

  /* Sizes of the texts: the body is 17 px, the others follow it */
  --text-body: 1.0625rem;
  --text-xs: .8rem;
  /* Secondary information of the chat (dates, meta of an answer, sources, labels, counter):
     one size, always in ink-soft */
  --text-meta: .8125rem;
  --text-eyebrow: .78rem;
  --text-rail: .8rem;
  --text-sm: .875rem;
  --text-table: .9rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-display: clamp(1.875rem, 5vw, 2.75rem);
  --text-2xl: 2rem;

  /* Radii and borders */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-strong: 2px;
  --accent-bar: 4px;
  --focus-width: 3px;

  /* Shadows tinted with the navy: at rest, hovered, floating */
  --shadow-sm: 0 1px 2px rgba(14, 29, 63, 0.06);
  --shadow-md: 0 6px 24px -8px rgba(14, 29, 63, 0.14);
  --shadow-lg: 0 24px 48px -16px rgba(14, 29, 63, 0.22);
  /* Behind a dialog of the application: the page veiled with the navy */
  --backdrop: rgba(14, 29, 63, 0.4);

  /* Transitions: background, colour, shadow and a slight lift */
  --transition: .2s;

  /* Spacings */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --card-pad-y: 36px;

  /* Widths of the page: a form, the administration, the chat; the history of the chat;
     the navigation bar */
  --width-page: 40rem;
  --width-wide: 76rem;
  --width-chat: 120rem;
  --width-form: 32rem;
  --rail-width: 15rem;
  /* Smallest target of a finger on a touch screen (WCAG 2.5.5, 44 px) */
  --target-touch: 2.75rem;
}