/* Folio's design tokens: the one place for colours, type, spacing, radii and the font (#14, direction A).
   The server pages link this file before pages.css; the web UI links the same file from index.html (/css/tokens.css).
   Names say what a token is for, not what colour it is, so a dark mode can later swap the values without touching
   components. docs/dev/ui.md explains when to use which. A test checks the contrast of the text pairs. */

/* Inter 4.1 (variable, SIL Open Font License 1.1: ../fonts/OFL.txt), served by Folio itself. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Grounds and surfaces */
  --bg: #F7F6F3;              /* page ground, sidebar */
  --surface: #FFFFFF;         /* content panel, cards, lists, inputs */
  --surface-hover: #FAF9F6;   /* row hover, table header */
  --fill-hover: #EFEDE7;      /* nav and icon button hover, neutral pill */
  --fill-selected: #EAE7E0;   /* selected nav item, space key badge */

  /* Lines */
  --line: #E6E3DC;            /* borders of panels, cards, lists, menus (decorative) */
  --line-soft: #EFEDE7;       /* row dividers */
  --line-strong: #8A857B;     /* input borders: at least 3:1 on surface and bg */

  /* Text */
  --ink: #1B1A17;             /* text, selected filter chip */
  --ink-2: #4A4741;           /* secondary text on fills */
  --muted: #66635C;           /* meta text, labels */
  --faint: #A8A399;           /* empty check circles, unassigned avatar; never text */
  --on-accent: #FFFFFF;       /* text and icons on --accent */

  /* Accent: brick red, never a status */
  --accent: #CC3D0C;          /* primary button, selected tab underline, logo, selected space key, focus ring */
  --accent-strong: #B33608;   /* accent hover; accent-coloured text on white (overdue dates, link hover) */
  --accent-soft: #FDE9E1;     /* agent label chip */
  --accent-ink: #8A2C06;      /* text on --accent-soft, links */

  /* Status: always together with its word */
  --status-todo-bg: #EFEDE7;
  --status-todo-fg: #4A4741;
  --status-doing-bg: #E6EEFE;
  --status-doing-fg: #1D4BAF;
  --status-waiting-bg: #FDF1D3;
  --status-waiting-fg: #7A4E00;
  --status-done-bg: #E3F1E7;
  --status-done-fg: #1C6B3A;  /* also the filled check */

  /* Errors and destructive actions */
  --danger: #B3261E;
  --danger-soft: #FCE8E6;

  /* Avatars: white initials on each, picked from the user id */
  --avatar-1: #9A3412;
  --avatar-2: #7A4E00;
  --avatar-3: #9D174D;
  --avatar-4: #6B21A8;
  --avatar-5: #3F4F8C;
  --avatar-6: #1D4BAF;
  --avatar-7: #0F5E6E;
  --avatar-8: #5C4033;

  /* Type */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-label: 12px;         /* uppercase, 0.04em tracking, 600 */
  --text-meta: 13px;          /* meta and pills: 12.5–13.5px, 400–600 */
  --text-ui: 14.5px;          /* UI text, nav, buttons: 400–600 */
  --text-body: 15px;          /* body text in the UI */
  --leading-body: 1.5;
  --text-page: 16px;          /* page body text (Markdown pages) */
  --leading-page: 1.65;
  --text-section: 16px;       /* section heading in lists */
  --text-section-page: 21px;  /* section heading in pages */
  --text-screen-title: 28px;
  --leading-screen-title: 1.25;
  --tracking-screen-title: -0.015em;
  --text-page-title: 34px;
  --leading-page-title: 1.2;
  --tracking-page-title: -0.02em;
  --tracking-label: 0.04em;
  --weight-heading: 650;

  /* Spacing: a 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* Radii */
  --radius-key: 6px;          /* keys, kbd */
  --radius-control: 10px;     /* buttons, inputs, nav items, menu items */
  --radius-card: 14px;        /* lists, cards, panels, menus */
  --radius-panel: 16px;       /* the main content panel */
  --radius-pill: 999px;       /* pills, chips, avatars */

  /* Sizes */
  --control-height: 40px;
  --touch-target: 44px;       /* controls below 720px, inputs on the server pages */
  --row-min-height: 56px;

  /* Only floating things (menus, popovers, the folded sidebar) have a shadow */
  --shadow-float: 0 6px 18px rgba(60, 30, 10, 0.18);
  --scrim: rgba(27, 26, 23, 0.32);  /* behind the folded sidebar on phones */

  /* Focus: on every interactive element */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  --duration-fast: 120ms;
}