/* Pantry — app token layer.
   The visual system is Modernist: `ds/styles.css` owns every base token
   (--color-*, --font-*, --space-*, --radius-*, --shadow-*). Nothing is
   redefined here. This file only names the app-specific roles the brief
   asks for, all resolved from Modernist values.

   Load order:  ds/styles.css  →  tokens.css
   Class convention: .pan-<block>__<element>--<modifier>
   (Modernist's own classes — .btn, .tag, .card, .input, .grayscale, .hr —
   are used as-is; do not fork them.) */

:root {
  /* ---- Roles ---- */
  --pan-ground:      var(--color-bg);            /* app background */
  --pan-panel:       var(--color-surface);       /* recessed panels, pantry group */
  --pan-ink:         var(--color-text);          /* primary text, inverse fills */
  --pan-ink-quiet:   var(--color-neutral-700);   /* secondary text */
  --pan-ink-faint:   var(--color-neutral-600);   /* meta, captions */
  --pan-accent:      var(--color-accent);        /* primary action, progress, active */
  --pan-accent-text: var(--color-accent-700);    /* accent at paragraph size (AA) */
  --pan-flag:        var(--color-accent-700);    /* "as written" — unscalable quantity */

  /* ---- Rules (Modernist draws structure, not shadows) ---- */
  --pan-rule-strong: 2px solid var(--color-divider);
  --pan-rule-hair:   1px solid var(--color-divider);
  --pan-rule-ink:    2px solid var(--color-text);

  /* ---- Photography ---- */
  --pan-photo-stripe: repeating-linear-gradient(135deg,
      var(--color-neutral-300) 0 8px, var(--color-neutral-200) 8px 16px);
  /* every content photograph goes through Modernist's .grayscale wrapper */

  /* ---- Shopping list: its own maximum-contrast skin ---- */
  --pan-aisle-ground: #ffffff;
  --pan-aisle-ink:    #000000;
  --pan-aisle-rule:   3px solid #000000;
  --pan-aisle-row:    1px solid #c9c9c9;
  --pan-aisle-done-bg: #f7f7f7;
  --pan-aisle-done-ink: #4a4a4a;

  /* ---- Cook mode: inverted ground ---- */
  --pan-cook-ground: var(--color-text);
  --pan-cook-ink:    var(--color-bg);
  --pan-cook-quiet:  var(--color-neutral-400);
  --pan-cook-rule:   1px solid var(--color-neutral-800);

  /* ---- Type roles (Archivo only — Modernist is a single-face system.
          Quantities and timers use tabular figures instead of a second face.) ---- */
  --pan-face-display: var(--font-heading);
  --pan-face-body:    var(--font-body);
  --pan-figures:      tabular-nums;

  --pan-text-micro: 10px;  /* uppercase labels over photography */
  --pan-text-label: 12px;  /* uppercase meta */
  --pan-text-sm:    14px;
  --pan-text-body:  16px;
  --pan-text-lg:    19px;  /* shopping list rows */
  --pan-text-title: 24px;
  --pan-text-hero:  34px;  /* recipe title, cook-mode step body */
  --pan-text-cook-qty: 24px;

  /* ---- Touch targets ---- */
  --pan-target-min:   44px;
  --pan-target-aisle: 56px;  /* shopping list rows, cook-mode controls */
  --pan-target-cook:  80px;  /* cook-mode advance */

  /* ---- Safe area (installed PWA, no browser chrome) ---- */
  --pan-inset-top:    env(safe-area-inset-top, 0px);
  --pan-inset-bottom: env(safe-area-inset-bottom, 0px);

  --pan-motion: 220ms;
}

@media (prefers-reduced-motion: reduce) { :root { --pan-motion: 0ms; } }