/* The names cyto-components.css needs that Smito One has no word for. Values from the design
   system's tokens.json; nothing here invents a colour.

   Short on purpose, and for two reasons. Everything the two vocabularies both have a word for
   uses Smito One's - --color-accent, --ff-body, --color-base-foreground - so one purpose has one
   name across the repository and an app only ever supplies values. And what is left is only what
   a rule we actually render reads: the amber accent, the record controls, the scrim and the lock
   surface went when their components did, and come back with them. */

:root {
  --color-accent-pressed: var(--smito-teal-800);
  --focus-ring: var(--smito-teal-500);

  /* The ground a route is drawn on, and the route itself */
  --surface-map: var(--smito-gray-100);
  --route-line: var(--smito-teal-600);
  --route-start: var(--color-success-foreground);
  --route-end: var(--color-error-foreground);

  /* Sized for a thumb rather than a mouse */
  --touch-min: 48px;
  --control-height: 52px;
  --radius-pill: 999px;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Cyto's own value for a shared name, which is the arrangement working as intended. Smito One
       turns a link the body colour in dark; Cyto keeps it teal, and four component rules are
       drawn against teal. The light value is already teal, so only dark needs saying. */
    --link-color: var(--smito-teal-600);
  }
}

/* The radii are the one thing that still has to be scoped, and the reason is mirroring rather
   than design. Cyto is a step rounder than Smito One - its README calls that deliberate - but
   cyto-web's main.css is byte-identical to one-web's and asset_parity holds it that way, so this
   app has no way to state its own value globally without re-rounding the business app too.

   Scoped here, a .cy-* component gets Cyto's shape and the rest of cyto-web keeps the shared
   chrome. If main.css ever stops being mirrored, these move to :root and the scope goes. */
.cy-scope {
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}