/* =========================================================================
   Штрих — дизайн-токени
   Концепція: аркуш паперу, на якому кожна задача лишає свій штрих.
   Папір, графіт, один акцентний «кольоровий олівець» (бурштин) і
   приглушені кольори задач. Штрихування — головний графічний мотив:
   план = заштриховано, факт = зафарбовано, таймер = штрихи до центру.
   ========================================================================= */

:root {
  /* Папір */
  --paper: #f6f1e4;
  --paper-raised: #fbf7ee;
  --ink-1: #efe7d3;
  --ink-2: #e8dec6;
  --ink-3: #ddd0b0;
  --hairline: #b9ab8a;
  --hairline-soft: #d8cbab;
  --rule: rgba(42, 35, 24, .07);

  /* Графіт */
  --text-hi: #2a2318;
  --text-mid: #5c5140;
  --text-lo: #8a7d64;
  --text-on-color: #221b10;

  /* Олівці */
  --accent: #c8631a;
  --accent-strong: #ad5214;
  --accent-soft: #f1d4ac;
  --accent-wash: rgba(200, 99, 26, .09);
  --ok: #3f7d5c;
  --ok-soft: #cde2d3;
  --warn: #b7862a;
  --danger: #a8402f;
  --danger-soft: rgba(168, 64, 47, .1);

  --shadow-1: 0 1px 0 rgba(42, 35, 24, .04), 0 1px 3px rgba(42, 35, 24, .06);
  --shadow-2: 0 2px 4px rgba(42, 35, 24, .05), 0 10px 28px rgba(42, 35, 24, .1);
  --shadow-3: 0 18px 48px rgba(42, 35, 24, .22);

  --radius-xs: 4px;
  --radius-s: 7px;
  --radius-m: 11px;
  --radius-l: 16px;
  --radius-xl: 22px;

  --font-ui: "Space Grotesk", "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-hand: "Shantell Sans", "Space Grotesk", system-ui, sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Штрих-фон аркуша (короткі вертикальні риски) */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg stroke='%232a241d' stroke-linecap='round'%3E%3Cpath d='M10 54V44' stroke-opacity='.055'/%3E%3Cpath d='M27 58V44' stroke-opacity='.04'/%3E%3Cpath d='M45 56V48' stroke-opacity='.05'/%3E%3Cpath d='M18 20V12' stroke-opacity='.035'/%3E%3Cpath d='M52 26V18' stroke-opacity='.045'/%3E%3C/g%3E%3C/svg%3E");

  color-scheme: light;
}

/* Темна тема — «графітовий аркуш». Кольори задач лишаються пастельними,
   тож текст на них завжди темний і читабельний в обох темах. */
:root[data-theme="dark"] {
  --paper: #1c1a16;
  --paper-raised: #23201b;
  --ink-1: #27241e;
  --ink-2: #2e2a23;
  --ink-3: #3a352c;
  --hairline: #57503f;
  --hairline-soft: #3d382e;
  --rule: rgba(239, 231, 214, .06);

  --text-hi: #efe7d6;
  --text-mid: #c2b69e;
  --text-lo: #8d826e;

  --accent: #e2833d;
  --accent-strong: #f0954f;
  --accent-soft: #5a3a20;
  --accent-wash: rgba(226, 131, 61, .12);
  --ok: #6fae8a;
  --ok-soft: #2b4436;
  --warn: #d6a64a;
  --danger: #e07a66;
  --danger-soft: rgba(224, 122, 102, .12);

  --shadow-1: 0 1px 0 rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .55);

  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg stroke='%23efe7d6' stroke-linecap='round'%3E%3Cpath d='M10 54V44' stroke-opacity='.04'/%3E%3Cpath d='M27 58V44' stroke-opacity='.03'/%3E%3Cpath d='M45 56V48' stroke-opacity='.035'/%3E%3Cpath d='M18 20V12' stroke-opacity='.025'/%3E%3Cpath d='M52 26V18' stroke-opacity='.03'/%3E%3C/g%3E%3C/svg%3E");

  color-scheme: dark;
}