/* Copied from logos-branding, commit ba829658011538346b977c030015f80c3b571ed2, bible/tokens.css, sha256 93af136f0d2b6ad2834457956c2e5d36d87e0ec15e2873f16e403e34196d23e1.
   Do not edit: src/brand_tokens.test.js fails when the lines below differ from that source. */
/* bible/tokens.css: the Logos brand as CSS variables, for the site and the application to read the same
   source. Every value is the one the site v2 uses today (scrollcraft/builds/2/representants/site.css,
   with the engine values it relies on from scrollcraft.css), or a brand colour from bible/palette.json,
   the only source of brand colours. The rules behind them are in bible/GUIDE.md.

   Nothing here is decided by this file. What the site never settled was decided by Alex on 2026-10-02
   (GUIDE.md, section 10); its variables are at the end. Values that decision asked for without giving
   are marked "to be validated by Alex".

   The site does not import this file yet: its own :root holds the same values. */

:root {
  /* ---------------------------------------------------------------- brand colours (bible/palette.json) */
  --logos-red: #f85247;          /* tanuki */
  --logos-blue: #0c62ce;         /* dolphin, body: the one action colour */
  --logos-blue-light: #56b0ea;   /* dolphin, belly */
  --logos-yellow: #fde43e;       /* chick */
  --logos-orange: #f98125;       /* chick, edge */
  --logos-paper: #fefefe;        /* the default ground */

  /* ------------------------------------------------- inks and grounds (bible/kit.html, site.css) */
  --logos-ink: #2a2622;          /* text; kit --encre */
  --logos-ink-soft: #6f675f;     /* secondary text; kit --doux */
  --logos-ink-deep: #1f1c19;     /* text on the red labels (5.08:1); site --ink-deep */
  --logos-tint: #f5f8fc;         /* alternate sections; site --tint */
  /* The one rule of the brand (GUIDE.md section 10, « Un seul filet »): ink at 14 %, #dddcdb on paper.
     The kit's #e6e1da is no longer used. */
  --logos-hairline: color-mix(in oklab, var(--logos-ink) 14%, transparent);   /* site --hairline */
  --logos-dots: color-mix(in oklab, var(--logos-ink) 38%, transparent);       /* site --dots */
  --logos-field-border: color-mix(in oklab, var(--logos-ink) 26%, transparent);        /* site .field__input */
  --logos-field-border-hover: color-mix(in oklab, var(--logos-ink) 45%, transparent);  /* site .field__input:hover */
  --logos-backdrop: color-mix(in oklab, var(--logos-ink) 38%, transparent);   /* site dialog::backdrop */
  --logos-selection: color-mix(in oklab, var(--logos-blue-light) 45%, var(--logos-paper));   /* site ::selection */
  --logos-action-hover: color-mix(in oklab, var(--logos-blue) 86%, var(--logos-ink));       /* site .btn:hover */
  --logos-error: #b3261e;        /* site .pilot__error; the brand's error since 2026-10-02 */

  /* ------------------------------------------------------------------------- type (site.css) */
  --logos-font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --logos-font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Files: scrollcraft/builds/2/assets/fonts (WOFF2, latin and latin-ext, OFL licences beside them).
     Bricolage Grotesque 200 to 800, Figtree 300 to 900. */

  --logos-t-open: clamp(3rem, 1.2rem + 6.2vw, 6.6rem);          /* h1 of the opening, 800 */
  --logos-t-close: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem);       /* closing title, 800 */
  --logos-t-section: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem);     /* section title, 800 */
  --logos-t-peak: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);          /* peak title, 800 */
  --logos-t-tension: clamp(2rem, 1.2rem + 2.6vw, 3.3rem);       /* tension title, 780 */
  --logos-t-hook: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem);        /* founder hook, 780 */
  --logos-t-card: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem);       /* card title, 760 */
  --logos-t-dialog: 1.6rem;                                     /* dialog title, 780 */
  --logos-t-item: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);    /* h3, 700 */
  --logos-t-question: clamp(1.1rem, 1rem + 0.4vw, 1.32rem);     /* question, Figtree 680 */
  --logos-t-lede: clamp(1.12rem, 0.95rem + 0.6vw, 1.45rem);     /* opening subtitle, 450 */
  --logos-t-body: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);        /* running text, 400 */
  --logos-t-small: clamp(0.86rem, 0.82rem + 0.15vw, 0.95rem);   /* proof line */
  --logos-t-caption: 0.95rem;                                   /* caption, footer */
  --logos-t-label: 0.92rem;                                     /* field label, 600 */
  --logos-t-tag: 0.82rem;                                       /* red label, 650 */
  --logos-t-button: 1rem;                                       /* button, 650 */
  --logos-t-button-giant: clamp(1.15rem, 1.1rem + 0.45vw, 1.45rem);   /* giant button, 700 */

  --logos-w-title: 800;
  --logos-w-button: 650;
  --logos-w-label: 600;
  --logos-w-body: 400;
  --logos-track-title: -0.04em;
  --logos-track-button: -0.005em;
  --logos-leading-title: 1.04;
  --logos-leading-body: 1.55;

  /* ----------------------------------------------------- space (site.css, engine scrollcraft.css) */
  --logos-gutter: clamp(1.25rem, 5vw, 5.5rem);    /* engine --sc-gutter; 16px on a phone */
  --logos-section: clamp(4.5rem, 9vw, 11rem);     /* engine --sc-section */
  --logos-card-pad: clamp(26px, 3vw, 40px);
  --logos-form-pad: 28px;
  --logos-form-gap: 14px;
  --logos-field-gap: 6px;
  --logos-field-pad: 10px 12px;

  /* ----------------------------------------------------------------------- targets (site.css) */
  --logos-h-button: 48px;
  --logos-h-button-form: 54px;
  --logos-h-button-giant: 76px;   /* 62px on a phone, 56px on a short phone */
  --logos-h-field: 46px;
  --logos-h-link: 44px;
  --logos-h-bar: 48px;            /* 50px on a phone, plus the safe area */

  /* ------------------------------------------------------------------------ radii (site.css) */
  --logos-r-pill: 999px;          /* buttons, labels, the mark's tab */
  --logos-r-card: 22px;
  --logos-r-dialog: 20px;
  --logos-r-field: 10px;
  --logos-r-small: 8px;
  --logos-r-focus: 6px;
  --logos-r-photo: 4px;

  /* ------------------------------------------------------------------- focus and shadow (site.css) */
  --logos-focus-ring: 0 0 0 3px var(--logos-paper), 0 0 0 5px var(--logos-blue);
  --logos-focus-outline: 3px solid var(--logos-blue);
  --logos-field-focus: 0 0 0 3px color-mix(in oklab, var(--logos-blue) 25%, transparent);
  --logos-shadow-color: 30 10% 16%;   /* hsl() channels, warm ink */
  --logos-shadow-card: 0 1px 2px hsl(var(--logos-shadow-color) / 0.06), 0 10px 28px -18px hsl(var(--logos-shadow-color) / 0.3);
  --logos-shadow-dialog: 0 2px 4px hsl(var(--logos-shadow-color) / 0.1), 0 24px 60px -12px hsl(var(--logos-shadow-color) / 0.3);

  /* ------------------------------------------------------------- motion (engine scrollcraft.css) */
  --logos-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --logos-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --logos-d-fast: 160ms;
  --logos-d-base: 240ms;
  --logos-d-slow: 420ms;
  --logos-spin: 1.2s;             /* one turn of the flat tomoe, bible/kit.html */
}

/* ------------------------------------------- Alex's decisions for the application, 2026-10-02 (GUIDE.md §10) */
:root {
  /* States. Error, success: text and marks. Warning, info: ground or mark only, text in ink on them. */
  --logos-success: #197d28;      /* the one green, success only. TO BE VALIDATED BY ALEX: 5.20:1 on paper */
  --logos-success-ink: var(--logos-paper);   /* text on the green: 5.20:1 */
  --logos-warning: var(--logos-orange);      /* ink on it: 5.86:1; never text on paper (2.54:1) */
  --logos-warning-ink: var(--logos-ink);
  --logos-info: var(--logos-blue-light);     /* ink on it: 6.29:1; never text on paper (2.37:1) */
  --logos-info-ink: var(--logos-ink);
  /* --logos-error is above: #b3261e, 6.48:1 on paper. */

  /* Greys: ink mixed into paper, at the steps the site already uses. None carries text (45 %: 2.96:1). */
  --logos-grey-14: color-mix(in oklab, var(--logos-ink) 14%, var(--logos-paper));   /* #dddcdb */
  --logos-grey-26: color-mix(in oklab, var(--logos-ink) 26%, var(--logos-paper));   /* #c1c0bf */
  --logos-grey-38: color-mix(in oklab, var(--logos-ink) 38%, var(--logos-paper));   /* #a6a4a3 */
  --logos-grey-45: color-mix(in oklab, var(--logos-ink) 45%, var(--logos-paper));   /* #979593 */

  /* Tables: headers in Figtree 650, one rule, alternate rows (rule under the header and tint rows:
     to be validated by Alex). */
  --logos-table-head-font: var(--logos-font-text);
  --logos-table-head-weight: 650;
  --logos-table-rule: 1px solid var(--logos-hairline);
  --logos-table-row-alt: var(--logos-tint);  /* ink-soft keeps 5.21:1 on it */

  /* Fields: the site's field carried on. */
  --logos-field-error: 0 0 0 3px color-mix(in oklab, var(--logos-error) 25%, transparent);   /* halo as the focus: to be validated */
  --logos-disabled-opacity: 0.5;
  --logos-readonly-ground: var(--logos-tint);       /* read-only: tint ground, hairline border, full ink: to be validated */
  --logos-readonly-border: var(--logos-hairline);
  /* Secondary button: blue outline, paper ground, blue text (2px inner outline, tint on hover: to be validated). */
  --logos-button-secondary-border: inset 0 0 0 2px var(--logos-blue);
  --logos-button-secondary-ink: var(--logos-blue);
  --logos-button-secondary-hover: var(--logos-tint);

  /* Icons: Lucide (lucide.dev, ISC licence), self-hosted, rounded stroke at the site's 2.2 to 2.4. */
  --logos-icon-stroke: 2.3;
  --logos-icon-stroke-min: 2.2;
  --logos-icon-stroke-max: 2.4;

  /* Charts: the tomoe's order (red, yellow, blue), then light blue and orange. Yellow always with an
     ink outline or an ink label (1.27:1 on paper). */
  --logos-chart-1: var(--logos-red);
  --logos-chart-2: var(--logos-yellow);
  --logos-chart-3: var(--logos-blue);
  --logos-chart-4: var(--logos-blue-light);
  --logos-chart-5: var(--logos-orange);
  --logos-chart-yellow-outline: var(--logos-ink);

  /* Density: an application scale, tighter than the site, targets of 44 px at least.
     The values below are proposed, to be validated by Alex. */
  --logos-app-target: 44px;
  --logos-app-field: 44px;
  --logos-app-row: 44px;
  --logos-app-space-1: 4px;
  --logos-app-space-2: 8px;
  --logos-app-space-3: 12px;
  --logos-app-space-4: 16px;
  --logos-app-space-5: 24px;
  --logos-app-space-6: 32px;
  --logos-app-t-body: 1rem;
  --logos-app-t-small: 0.875rem;
  --logos-app-t-title: 1.5rem;   /* Bricolage Grotesque 800 */

  /* No dark mode for now: paper is the only ground. Bricolage Grotesque and Figtree everywhere. */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --logos-spin: 6s;                  /* bible/kit.html */
    --logos-d-transition-reduced: 1ms; /* site.css: buttons, fields, arrow, question icon */
    --logos-d-reveal-reduced: 220ms;   /* scrollcraft.css: reveals by opacity only, no movement */
  }
}