/* tipii-web-kit 0.1.0 · tokens.css
 *
 * The variables both bricks (public.css, admin.css) are built on. Load it first.
 * Tipii' is the default theme; put data-theme="reciteo" on <html> for Réciteo,
 * or override any variable in a later :root block.
 *
 * The semantic names are the ones the Réciteo back-office (tipii-books-editor)
 * already uses, so it can adopt this file without renaming its classes.
 */

:root,
[data-theme='tipii'] {
  /* Brand palette — brand.tipii.fr. Use the semantic names below in components;
     these stay available for brand-specific touches. */
  --moss: #d6dad4;
  --pistachio: #b79858;
  --honey: #e9bc69;
  --rust: #8b2517;
  --peach: #efaa93;
  --terracotta: #d95940;
  --banner-red: #c9412f;
  --olivewood: #170f0c;
  --feather: #faf9f6;
  --blush: #fbe3dd;

  /* Surfaces */
  --ground: var(--feather); /* back-office canvas, alternate public sections */
  --rail: #f1efea; /* back-office side nav: a shade deeper than the canvas */
  --paper: #ffffff; /* public page, cards, tables, panels */
  --chip: #efede8; /* subtle fills, badges, progress tracks */
  --line: #e8e6e1; /* hairlines */

  /* Text */
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --faint: #a1a1a6;

  /* Accents */
  --accent: var(--pistachio); /* active marks, bars, progress, switches */
  --accent-hover: #9c7f43;
  --accent-soft: #fbf1de;
  --accent-line: #f1ddb4;
  --highlight: var(--banner-red); /* coloured banner blocks */
  --on-highlight: #ffffff;
  --gold: var(--honey); /* announcement bar, toasts, badges */
  --focus: var(--rust);

  /* Primary action */
  --primary: var(--olivewood);
  --primary-hover: #2b211d;
  --primary-ink: #ffffff;

  /* Status — red is for errors only */
  --ok: #2f7d4f;
  --ok-soft: #e4f1e8;
  --ok-line: #bcdcc8;
  --warn: #8a5a12;
  --warn-soft: #fbeed4;
  --warn-line: #ecd7a3;
  --danger: var(--rust);
  --danger-hover: #6f1d12;
  --danger-soft: #fcf1ee;
  --danger-line: #f3c9bf;

  /* Type */
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;

  /* Shape */
  --r-pill: 999px;
  --r-card: 12px;
  --r-field: 12px;
  --shadow-card: 0 1px 2px rgb(23 15 12 / 0.04), 0 1px 12px rgb(23 15 12 / 0.04);
  --shadow-pop: 0 10px 30px rgb(23 15 12 / 0.22);

  /* Layout */
  --gutter: 20px;
  --max-width: 1200px;
}

/* Réciteo — reciteo.fr: cream paper, warm ink, deep rust accent. */
[data-theme='reciteo'] {
  --ground: #f4efe9;
  --rail: #ece3d8;
  --paper: #fffcf8;
  --chip: #e9e1d6;
  --line: #e2d9cd;

  --ink: #170f0c;
  --muted: #6b5d55;
  --faint: #9a8b80;

  --accent: #a02500;
  --accent-hover: #851f00;
  --accent-soft: #fbe9e2;
  --accent-line: #f0c6b6;
  --highlight: #d95940;
  --on-highlight: #ffffff;
  --gold: #e9bc69;
  --focus: #a02500;

  --primary: #170f0c;
  --primary-hover: #33231c;
  --primary-ink: #faf9f6;

  --ok: #0a7a4e;
  --ok-soft: #ddefe4;
  --ok-line: #b6ddc7;
  --warn: #8a5a12;
  --warn-soft: #fbeed4;
  --warn-line: #ecd7a3;
  --danger: #c4301c;
  --danger-hover: #a02500;
  --danger-soft: #fbe7e2;
  --danger-line: #edbcb0;

  --r-card: 16px;
  --r-field: 10px;
  --shadow-pop: 0 8px 32px rgb(23 15 12 / 0.12);
}

@media (min-width: 900px) {
  :root {
    --gutter: 48px;
  }
}