/*
 * Octoolo's design tokens, direction "Chromatic": shared by the app (src/) and the website (site/).
 *
 * Like an octopus, Octoolo changes color. Each tool family owns one bold color, used as a full
 * field (tiles, headers, the center of the mark); everything else is paper, white and ink.
 * - No single accent: black is the action color (pill buttons, selection, focus).
 * - Category colors are full strength, with black or white text that passes WCAG (see --on-*).
 * - Funnel Display for headlines (big, tight), Funnel Sans for the interface, DM Mono for details.
 * - Big, friendly radii: pills for actions, 20px+ for cards and fields of color.
 * See brand/BRAND.md.
 */

:root {
  /* Surfaces and ink. */
  --paper: #fbfaf7;
  --white: #ffffff;
  --sand: #f3f1ec;
  --sand-2: #ebe8e1;
  --line: #e6e3dc;
  --line-strong: #d6d2c9;
  --field-line: #94908a;
  --ink: #0d0d0d;
  --ink-2: #45443f;
  --ink-3: #6b6a65;
  --ink-4: #86847e;

  /* The tool families, and the text color that reads on each. */
  --c-pdf: #ff4a3d;
  --on-pdf: #0d0d0d;
  --c-office: #ff8a1f;
  --on-office: #0d0d0d;
  --c-image: #ffc933;
  --on-image: #0d0d0d;
  --c-video: #6f4dff;
  --on-video: #ffffff;
  --c-audio: #2bd9a0;
  --on-audio: #0d0d0d;
  --c-convert: #119e8e;
  --on-convert: #0d0d0d;
  --c-text: #2a62f2;
  --on-text: #ffffff;
  --c-dev: #ff6fb5;
  --on-dev: #0d0d0d;
  --c-calc: #b6e83c;
  --on-calc: #0d0d0d;
  --c-security: #12b5e5;
  --on-security: #0d0d0d;
  --c-productivity: #c25bff;
  --on-productivity: #0d0d0d;
  --c-files: #8b5e34;
  --on-files: #ffffff;

  /* Status. */
  --ok: #128a5e;
  --ok-bg: #e3f8ef;
  --danger: #c4271c;
  --danger-bg: #ffe9e6;
  --warn: #9a5300;
  --warn-bg: #fff1dd;

  /* Type. */
  --font-display: "Funnel Display Variable", "Funnel Display", "Segoe UI Variable Display", system-ui, sans-serif;
  --font-sans: "Funnel Sans Variable", "Funnel Sans", "Segoe UI Variable Text", system-ui, sans-serif;
  --font-mono: "DM Mono", "Cascadia Mono", Consolas, monospace;

  /* Shape. */
  --r-field: 12px;
  --r-card: 20px;
  --r-block: 28px;
  --r-pill: 999px;
  --shadow-pop: 0 1px 2px rgb(13 13 13 / 0.06), 0 12px 32px rgb(13 13 13 / 0.08);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}