/* Project tokens; the palette and fonts come from darc-zensical.css. */

:root {
  /* Text, strokes and fills; light surfaces swap them (components.css). */
  --color-black: var(--oa-black);
  --color-white: var(--oa-paper);

  /* .screen--bg-* */
  --bg-white:  var(--oa-paper);
  --bg-black:  var(--oa-black);
  --bg-green:  var(--oa-green-300);
  --bg-orange: var(--oa-orange-400);
  --bg-yellow: var(--oa-yellow-100);
  --bg-purple: var(--oa-purple-200);

  /* Gap in action rows */
  --s: 1.25rem;
  --section-y: clamp(3.2rem, 9vw, 6rem);

  --stroke-width: 2px;
  --radius-card:    1.6rem;
  --radius-chip-sm: 0.8rem;
  --shadow-button: 2px 2px 0 0 var(--color-white);

  --container-lg: 1024px;
  --container-xl: 1280px;
  /* Side padding of the page (main) */
  --page-x: 1rem;

  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-bg: background-color .4s linear;

  --font-weight-bold: 700;
}

@media (min-width: 640px) {
  :root { --page-x: 1.5rem; }
}
@media (min-width: 1024px) {
  :root { --page-x: 2rem; }
}