/* Hallmark · tokens · logtop
 *
 * Derived from logtop/static/index.html :root, converted hex -> OKLCH. The
 * marketing page and the product share one palette on purpose: a site that
 * looks like a different company than the app it sells is a trust cost, and
 * this is a product bought by people who are already suspicious.
 *
 * No web fonts. The app ships a system stack and the site matches it, which is
 * also how the page stays under its weight budget on hotel wifi.
 */

:root {
  /* paper + ink */
  --color-paper:      oklch(97% 0.002 250);   /* #F5F6F7 */
  --color-paper-card: oklch(100% 0 0);        /* #FFFFFF */
  --color-ink:        oklch(29% 0.030 250);   /* #1D2D3E */
  --color-label:      oklch(51% 0.040 252);   /* #556B82 */
  --color-rule:       oklch(88% 0.002 250);   /* #D9D9D9 */
  --color-rule-soft:  oklch(92% 0.002 250);   /* #E5E5E5 */

  /* accent */
  --color-accent:       oklch(56% 0.205 258); /* #0070F2 */
  --color-accent-hover: oklch(51% 0.200 258);
  --color-accent-soft:  oklch(96% 0.020 258);
  --color-accent-ink:   oklch(100% 0 0);

  /* semantic — used only by the diagram's yes/no rails */
  --color-yes:      oklch(56% 0.130 148);
  --color-yes-soft: oklch(96% 0.025 148);
  --color-no:       oklch(51% 0.210 27);
  --color-no-soft:  oklch(96% 0.030 27);

  --color-focus: var(--color-accent);

  /* type — 2+1: system sans for display and body, system mono for data */
  --font-display: "Segoe UI", "72", "72full", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    var(--font-display);
  --font-mono:    "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, monospace;

  --text-display: clamp(2.25rem, 1.3rem + 4.2vw, 4rem);
  --text-2xl:     clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --text-lg:      1.125rem;
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.8125rem;

  /* space — 4pt scale */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --radius:    8px;
  --radius-sm: 4px;
  --rule:      1px;

  --measure: 34rem;   /* reading column */
  --page-max: 60rem;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
}

/* The app has a dark theme, so the site owes the reader one too. Same accent,
   inverted paper -- no second palette to keep in sync. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:      oklch(21% 0.020 250);
    --color-paper-card: oklch(25% 0.022 250);
    --color-ink:        oklch(95% 0.004 250);
    --color-label:      oklch(72% 0.028 252);
    --color-rule:       oklch(34% 0.022 250);
    --color-rule-soft:  oklch(30% 0.020 250);

    --color-accent:       oklch(70% 0.170 258);
    --color-accent-hover: oklch(76% 0.160 258);
    --color-accent-soft:  oklch(30% 0.060 258);
    --color-accent-ink:   oklch(18% 0.020 258);

    --color-yes:      oklch(72% 0.140 148);
    --color-yes-soft: oklch(28% 0.045 148);
    --color-no:       oklch(70% 0.170 27);
    --color-no-soft:  oklch(29% 0.055 27);
  }
}