/* Tablio / Codivra design tokens. Import before components.css. */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  /* Surface */
  --paper: #f7f7f4;        /* page background */
  --card: #ffffff;
  --sunken: #eeeeea;       /* inline code, placeholders */
  --night: #14151a;        /* one dark chapter per page */
  --night-line: #3b3c45;
  --night-rule: #2a2b33;
  --night-muted: #9798a4;
  --night-text: #c3c3cb;
  --accent-soft: #e5e9f5;  /* Pro edition, active nav item */
  --accent-soft-line: #d0d5e3;

  /* Ink & line */
  --ink: #151518;          /* headings, primary text */
  --ink-2: #45454e;        /* table cells, values */
  --read: #2b2b33;         /* long-form article body */
  --muted: #6b6b74;        /* body copy, labels */
  --faint: #9a9aa0;        /* mono meta only, never body text */
  --line: #deded9;         /* hairlines */
  --line-strong: #cfcfca;  /* outline buttons */
  --field: #e4e4e7;        /* form control edge */

  /* Accent */
  --accent: #3157e8;
  --accent-press: #2348d4;
  --spot: #d9ef45;         /* night surfaces only */

  /* Status (fg on bg) */
  --ok-fg: #406b51;   --ok-bg: #ebf3ec;   --ok-line: #dbe6dd;
  --warn-fg: #806020; --warn-bg: #faf3df; --warn-line: #e2d7b4; --warn-text: #5f4a1c;
  --info-fg: #4c608e; --info-bg: #edf0fb; --info-line: #d0d5e3; --info-text: #3b4763;

  /* Shape */
  --r-structure: 0;
  --r-control: 3px;
  --r-window: 7px;
  --r-avatar: 4px;
  --shadow-window: 0 20px 65px -28px #23253d38, 0 2px 5px #22222205;

  /* Type */
  --font: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --serif-aside: Georgia, serif;   /* italic, max once per page */

  /* Space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --container: 1200px;
  --gutter: 56px;          /* 20px under 680px */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-color: 200ms; --d-transform: 250ms; --d-reveal: 300ms; --d-layout: 650ms;
}