/* Translayo — Shape, elevation & rhythm tokens v1.0 + base resets
   Load order: colors.css, typography.css, tokens.css, then 04-Components. */
/* Surfaces are NOT declared here. They were, identically to colors.css, and since
   this file loads last its copy won a cascade nobody knew was happening — editing
   --surface in colors.css alone would have been silently overridden in the light
   theme. colors.css owns colour; this file owns shape, elevation and rhythm.
   test/color-contrast.test.js fails if the two files declare the same token. */
:root{
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --shadow-card:0 1px 2px rgba(23,32,27,.04),0 4px 14px rgba(23,32,27,.05);
  --shadow-raised:0 2px 4px rgba(23,32,27,.05),0 14px 34px rgba(23,32,27,.09);
  --control-h:38px;
  --control-h-sm:30px;
}

/* ---- Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,textarea,select{font:inherit;color:var(--ink)}
:focus-visible{outline:2px solid var(--green-text);outline-offset:2px;border-radius:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.hidden{display:none!important}

/* ---- Dark theme: elevation & native chrome ----
   Applied on prefers-color-scheme, and forced by [data-theme="dark"], exactly
   like the palette in colors.css.

   The light theme spends ink at 4-9% alpha to lift a card off the page. On a
   dark ground that reads as nothing at all — a shadow cannot be darker than
   near-black. Elevation in dark mode is carried by --surface sitting lighter
   than --bg (see colors.css) and the shadow only deepens the edge, at alpha
   high enough to register.

   color-scheme is what makes the native controls follow: the app uses <select>
   in the topbar and the site picker, and without this they stay light-on-light,
   along with the scrollbars and every date and colour picker. */
@media (prefers-color-scheme: dark){
  /* A copy of the block below. CSS cannot share a declaration block between a
     media query and a selector, so the values are written twice and
     test/color-contrast.test.js asserts the two stay identical.
     :not([data-theme="light"]) lets a future explicit light choice win. */
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --shadow-card:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.4);
    --shadow-raised:0 2px 4px rgba(0,0,0,.55),0 14px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --shadow-card:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.4);
  --shadow-raised:0 2px 4px rgba(0,0,0,.55),0 14px 34px rgba(0,0,0,.5);
}