/*
  The ground both hosts stand on: one face, ink and cardboard in a light and a dark mode (the
  frame's tone with them), the focus ring, the wordmark, the button and the light/dark switch.
  Each value was measured once (docs/design/README.md), and a number written down twice is a
  number that moves in one place and not the other.

  The page follows the device until the reader presses the switch; theme.js applies that choice
  before first paint.

  TEAL MEANS GREW, AND NOTHING ELSE. Not buttons, not headings, not links, not focus, not a chart's
  line. A number that fell or held gets no colour at all. Kraft is the one warm colour, and it only
  ever draws a shop.

  What is NOT here, deliberately:
  - Scale tokens (type sizes, spacing, radii, widths) stay per host: one is a landing page, the
    other a dense table. The button reads --r-sm from the host and is sized for the public site.
    The frame's own sizes (the bar, the sidebar, a control's height) are in frame.css, because
    both hosts draw the same frame.
  - The admin host's status ramp (alarm, caution), measured against these grounds but used only
    there, in its tokens.css.
  - --pos and --magenta. The public site aliases them to teal, where they only mean "grew"; an
    alias here would hand that to every older admin rule that used them for focus or selection.
    The aliases below are neutral names only.

  Loaded before the host's own sheet, which may alias these names but must not redefine them.
*/

/* Variable weight, so two files cover every weight; latin-ext first so the latin file is the
   only one most pages fetch. Nothing loads from Google Fonts. */
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/albert-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/albert-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:      #F3F4F1;
  --card:       #FFFFFF;
  --well:       #F8F9F6;
  --ink:        #1D2433;
  --ink-soft:   #545B69;
  --ink-faint:  #666C77;
  --line:       #D8DBD3;
  --line-hi:    #B9BDB5;
  --tint:       rgba(29, 36, 51, .06);
  --grow:       #08776B;
  --grow-panel: #066F64;
  --kraft:      #C8965C;
  --kraft-top:  #DBAE77;
  --kraft-side: #A9793F;
  --tape:       #EBD8B0;
  /* Writing on the tape: one value, dark enough on both modes' tape (9.8 and 6.9:1). */
  --tape-ink:   #3B2A12;
  --parcel:     #A9793F;
  --edge:       rgba(29, 36, 51, .45);
  --shadow:     rgba(29, 36, 51, .1);
  --chart-grid: rgba(29, 36, 51, .08);
  /* The tinted panel, and the lift under the one window that sits on it. */
  --panel:      #E6E9E3;
  --lift:       0 1px 2px rgba(29, 36, 51, .06), 0 28px 56px -20px rgba(29, 36, 51, .22);
  /* The panel's ruling, like a cutting mat: a fine line and a stronger one every fifth. */
  --rule:       rgba(29, 36, 51, .045);
  --rule-hi:    rgba(29, 36, 51, .08);
  /* The closing band: the page's one dark block in the light mode. */
  --band:       #1D2433;
  --band-ink:   #F3F4F1;
  --band-soft:  #B4BAC4;
  --band-rule:  rgba(243, 244, 241, .05);
  /* The frame around the work (frame.css), a step darker than the page. */
  --chrome:     #E7E9E3;
  /* Under a menu, a dialog or a readout: the one thing that floats. */
  --pop:        0 12px 32px -8px rgba(29, 36, 51, .28);
  /* The switch shows the mode it would switch to. */
  --sun: none;
  --moon: block;
  color-scheme: light;

  --font: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--font);
  --body: var(--font);
  --mono: var(--font);
  --ease: cubic-bezier(.22, .68, 0, 1);

  /* platform tints — approved values, unchanged. Always beside the name. */
  --p-tiktok:    #3987e5;
  --p-youtube:   #d95926;
  --p-instagram: #9085e9;
  --p-etsy:      #199e70;
  --p-other:     #8a94a4;

  /* Neutral aliases, so sheets written for the old dark ground restyle without a rename. */
  --void: var(--paper);
  --ground: var(--well);
  --raise: var(--card);
  --glass: var(--card);
  --glass-hi: var(--tint);
  --stroke: var(--line);
  --stroke-hi: var(--line-hi);
  --ink-2: var(--ink-soft);
  --ink-3: var(--ink-faint);
}

/* Deep on purpose: the reader asked for a dark ground, and the parcels carry the warmth. Kraft
   steps down a shade so a stack does not glare on it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1318; --card: #181D25; --well: #131820;
    --ink: #ECEDE8; --ink-soft: #9EA5B0; --ink-faint: #858C98;
    --line: #262C37; --line-hi: #3A4250; --tint: rgba(255, 255, 255, .07);
    --grow: #4FD1BD; --grow-panel: #4FD1BD;
    --kraft: #A97D4A; --kraft-top: #BD9160; --kraft-side: #86602F; --tape: #CDB485; --parcel: #B08450;
    --edge: rgba(0, 0, 0, .5); --shadow: rgba(0, 0, 0, .5); --chart-grid: rgba(255, 255, 255, .07);
    --panel: #141920; --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 28px 56px -20px rgba(0, 0, 0, .7);
    --rule: rgba(236, 237, 232, .035); --rule-hi: rgba(236, 237, 232, .065);
    --band: #181D25; --band-ink: #ECEDE8; --band-soft: #9EA5B0; --band-rule: rgba(236, 237, 232, .04);
    --chrome: #0A0D11; --pop: 0 12px 32px -8px rgba(0, 0, 0, .7);
    --sun: block; --moon: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1318; --card: #181D25; --well: #131820;
  --ink: #ECEDE8; --ink-soft: #9EA5B0; --ink-faint: #858C98;
  --line: #262C37; --line-hi: #3A4250; --tint: rgba(255, 255, 255, .07);
  --grow: #4FD1BD; --grow-panel: #4FD1BD;
  --kraft: #A97D4A; --kraft-top: #BD9160; --kraft-side: #86602F; --tape: #CDB485; --parcel: #B08450;
  --edge: rgba(0, 0, 0, .5); --shadow: rgba(0, 0, 0, .5); --chart-grid: rgba(255, 255, 255, .07);
  --panel: #141920; --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 28px 56px -20px rgba(0, 0, 0, .7);
  --rule: rgba(236, 237, 232, .035); --rule-hi: rgba(236, 237, 232, .065);
  --band: #181D25; --band-ink: #ECEDE8; --band-soft: #9EA5B0; --band-rule: rgba(236, 237, 232, .04);
  --chrome: #0A0D11; --pop: 0 12px 32px -8px rgba(0, 0, 0, .7);
  --sun: block; --moon: none;
  color-scheme: dark;
}

/* Focus is ink, never the accent. Before the buttons, which keep their own radius when focused. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/*
  For text a screen reader must hear and a sighted reader does not need — "(opens in a new tab)".
  `display: none` would hide it from both, which is the mistake this rule exists to avoid. Here
  rather than in a host, because ExternalLink draws it on both.
*/
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The light/dark switch theme.js drives. It shows the mode it would switch to. */
.theme {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
}
.theme:hover { color: var(--ink); border-color: var(--ink-soft); }
.theme:active { transform: scale(.94); }
.theme svg { grid-area: 1 / 1; transition: transform 420ms cubic-bezier(.3, 1.4, .6, 1); }
.theme:hover svg { transform: rotate(-18deg); }
.theme .sun { display: var(--sun); }
.theme .moon { display: var(--moon); }

/* The wordmark (Wordmark.razor): a parcel and the name, on every header of both hosts. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

/* A parcel's faces: the wordmark's on both hosts (Parcel.razor) and the public hero's alike. */
.p-front { fill: var(--kraft); }
.p-top { fill: var(--kraft-top); }
.p-side { fill: var(--kraft-side); }
.p-front, .p-top, .p-side { stroke: var(--edge); stroke-width: .75; stroke-linejoin: round; }
.p-tape { fill: var(--tape); }

/* Square-shouldered, like a label on a box. A press moves a pixel; that is the whole of the
   feedback, and it is enough. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 20px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.btn:active { transform: translateY(1px); }
.btn:not(.btn-primary):hover { background: var(--tint); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.btn-small { min-height: 36px; padding-inline: 14px; font-size: .875rem; }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }