/* ==========================================================================
 * Design tokens
 *
 * The single source of truth for every colour, texture, metric and type stack
 * in the app. Nothing else in app/assets/stylesheets declares a token, and
 * nothing else asks the operating system what colour scheme it is in: the one
 * `prefers-color-scheme` query lives at the bottom of this file and swaps
 * values only. A component that reaches for a literal colour is a bug — it
 * will be correct in one scheme and wrong in the other.
 *
 * Both schemes describe the same object: near-black ink on white paper, or the
 * same sheet read on a phosphor screen. Ink and paper trade places, the
 * hairlines and dithers follow, and every rule that only ever said
 * `var(--ink)` keeps working untouched.
 * ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Type ------------------------------------------------------------ */
  --font-stack-sans-serif: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --font-stack-headings: var(--font-stack-sans-serif);
  --font-stack-monospace: var(--font-stack-sans-serif);
  --font-stack-serif: "Iowan Old Style", Baskerville, "Times New Roman", Times, serif;

  /* --- Space and shape ------------------------------------------------- */
  --base-spacing: 16px;
  --button-radius: 3px;
  --form-radius: 3px;
  --calendar-radius: 0;

  /* Three control heights, so buttons, inputs and chips never disagree. */
  --control-h: 28px;
  --control-h-md: 24px;
  --control-h-sm: 20px;
  /* One height for every inline chip: tags, schedule badges, filter chips. */
  --chip-h: 1.6rem;

  /* --- Surface and ink -------------------------------------------------- */
  --paper: #ffffff;
  --ink: #000000;
  --ink-soft: #5f5f5f;
  --ink-faint: #929292;
  --surface-subtle: #f5f5f5;
  --surface-hover: #e9e9e9;
  --wash: var(--surface-subtle);
  --line: #d8d8d2;
  --line-strong: var(--ink);

  /* --- Interaction ------------------------------------------------------ */
  --focus: var(--ink);
  --interactive-hover-bg: var(--ink);
  --interactive-hover-fg: var(--paper);
  /* Scrims behind modal surfaces: paper-side in light, ink-side in dark. */
  --veil: rgba(255, 255, 255, 0.78);
  /* Hard offset shadow. It has to sit clear of the paper it falls on, so it
     goes darker than the page in light and lighter than it in dark. */
  --shadow: var(--ink);
  --mac-shadow: 2px 2px 0 var(--shadow);

  /* --- Status ----------------------------------------------------------- */
  --danger: #8f2525;
  --success: #285a3d;
  --success-bg: #edf4ef;
  --success-line: #b8cbbb;
  --accent: #9b3e0d;
  /* The two task urgencies have to be told apart at a glance, so they sit
     further apart than the shared --accent / --danger pair does. */
  --warning: #b45309;
  --overdue: #c62828;
  --highlight: #ffef7a;

  /* --- Texture ---------------------------------------------------------- */
  /* Ordered dither, drawn as pixels rather than faked with opacity. */
  --dither-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='%23000000'/%3E%3C/svg%3E");
  --dither-25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0z' fill='%23000000'/%3E%3C/svg%3E");
  --dither-50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23000000'/%3E%3C/svg%3E");

  /* The desktop behind the framed entry screens. A 50% checkerboard is the
     System 7 reference, but at full ink strength on a dark page it reads as
     static, so the dark scheme dims the pattern instead of the layout. */
  --desktop-texture: var(--dither-50);

  /* The 1-bit artwork is dithered black on white, so the dark scheme inverts
     it rather than leaving a lit panel in the middle of a dark page. Portraits
     are deliberately not on this token. */
  --art-filter: grayscale(1);

  /* Six title bar rules, two pixels apart. */
  --pinstripe: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 2px);

  /* Chrome glyphs that can't take currentColor because they are backgrounds. */
  --mark-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5 8.5 8.5M8.5 1.5 1.5 8.5' stroke='%23000000' stroke-width='1.3'/%3E%3C/svg%3E");
  --mark-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1 11 11M11 1 1 11' stroke='%23000000' stroke-width='2'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101010;
    --ink: #f0f0ea;
    --ink-soft: #a6a6a0;
    --ink-faint: #70706b;
    --surface-subtle: #191918;
    --surface-hover: #262624;
    --line: #3c3c38;

    --veil: rgba(8, 8, 8, 0.78);
    --shadow: var(--ink-faint);

    --danger: #e0736c;
    --success: #7fb894;
    --success-bg: #17251d;
    --success-line: #2f4a3a;
    --accent: #e08b4e;
    --warning: #d9a05b;
    --overdue: #f0857c;
    --highlight: #4d4413;

    --dither-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='%23f0f0ea'/%3E%3C/svg%3E");
    --dither-25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0z' fill='%23f0f0ea'/%3E%3C/svg%3E");
    --dither-50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23f0f0ea'/%3E%3C/svg%3E");

    --art-filter: grayscale(1) invert(1);

    --desktop-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%232b2b28'/%3E%3C/svg%3E");

    --mark-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5 8.5 8.5M8.5 1.5 1.5 8.5' stroke='%23f0f0ea' stroke-width='1.3'/%3E%3C/svg%3E");
    --mark-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1 11 11M11 1 1 11' stroke='%23f0f0ea' stroke-width='2'/%3E%3C/svg%3E");
  }
}