/* Dramatis's own tokens, after the design package (design/css/design.css,
   which holds the foundations and the five themes). Components reference
   these, never literal values. 4px grid. */

:root {
  /* layout */
  --chrome-h: 44px;
  --status-h: 32px;
  --outline-w: 264px;
  --detail-w: 480px;
  --content-max: 1200px;
  --tab-bar-h: 56px; /* phone: the view tabs move to the bottom */

  /* type: names and headings */
  --text-title: 20px;
  --lh-title: 28px;
  --text-name: 15px;
  --text-body: 14px;
  --lh-body: 22px;
  --text-small: 12px;
  --text-label: 11px;

  /* controls */
  --control-h: 32px;
  --control-h-small: 24px;
  --radius-control: 4px;
  --radius-card: 8px;
  --radius-pill: 12px;
  --popover-pad: 4px;
  --chip-h: 24px;
  --dot: 8px;
  --swatch: 16px;
  --swatch-ring: 3px; /* the chosen swatch: a ring outside a 2px gap */

  /* cards */
  --card-min: 248px;
  --card-portrait: 48px;
  --detail-portrait: 96px;
  --thumb: 56px;
  --accent-bar: 3px;

  /* palette */
  --palette-top: 96px;
  --palette-w: 560px;
  --palette-max-h: 440px;
  --palette-input-h: 48px;
  --palette-row-h: 32px;

  /* the map */
  --map-h: 70vh;
  --map-w-phone: 760px;
  --map-grain: 0.05;
  --map-edge-w: 1.25px;
  --map-edge-opacity: 0.7;
  --map-label: 10px;
  --map-dot-hover: 9px;

  /* toast */
  --toast-w: 480px;
}

/* Category colors: each relationship and event category is one of the
   theme's swatches, chosen for its meaning; "Other" is neutral. Declared on
   every themed element so each theme resolves its own swatch. */
:root,
[data-theme] {
  --color-rel-family: var(--color-cat-green);
  --color-rel-romantic: var(--color-cat-pink);
  --color-rel-friendship: var(--color-cat-blue);
  --color-rel-professional: var(--color-cat-teal);
  --color-rel-alliance: var(--color-cat-yellow);
  --color-rel-antagonistic: var(--color-cat-red);
  --color-rel-other: var(--color-text-dimmer);

  --color-event-birth: var(--color-cat-green);
  --color-event-death: var(--color-cat-pink); /* (today's mauve) */
  --color-event-meeting: var(--color-cat-blue);
  --color-event-conflict: var(--color-cat-red);
  --color-event-discovery: var(--color-cat-yellow);
  --color-event-journey: var(--color-cat-teal);
  --color-event-political: var(--color-cat-purple);
  --color-event-other: var(--color-text-dimmer);

  /* a card's portrait stand-in: the accent, quietly */
  --color-monogram: color-mix(in oklab, var(--color-accent) 18%, var(--color-popover));
  /* the outline column: a step below the page */
  --color-column: color-mix(in oklab, var(--color-chrome) 60%, var(--color-page));
}

/* Durations that are Dramatis's own (the package zeroes its own under reduced motion). */
:root {
  --dur-sheet: 240ms;
  --dur-spin: 900ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-sheet: 0ms; }
}