/*!
* design-system.css - the utilities the storefront's markup needs and the
* prebuilt Tailwind subset in tailwindcss.css does not ship.
*
* WHY THIS FILE EXISTS
* The design this storefront is ported from is a Tailwind + shadcn build whose
* config defines a *bare* `primary` colour (`bg-primary`, `bg-primary/10`,
* `text-primary-foreground`, `ring-primary/20`) and a full `slate` palette, and
* whose JIT emits arbitrary values (`w-[10.5rem]`, `min-h-[80vh]`,
* `leading-[17px]`, `grid-cols-[minmax(0,1fr)_auto]`).
*
* This project has no Tailwind build at all: tailwindcss.css is a static,
* pre-generated v3.3.3 dump loaded as a plain . It carries a *numbered*
* primary scale (`bg-primary-500` and its alpha ladder) but no bare `primary`,
* no `slate`, no `line-clamp`, no `aspect-square`, and no arbitrary values -
* so markup copied from the design rendered completely unstyled.
*
* Rather than introduce a Tailwind pipeline (whose preflight would reset
* Vuetify and Bootstrap and change every existing page), this sheet is loaded
* LAST and is strictly additive: it defines only classes that are absent from
* the dump. Nothing here overrides an existing utility, so no page that
* renders correctly today can change.
*
* `--ds-primary` is an "R G B" triplet so the `/10`, `/20`, `/90` alpha
* variants work; layouts/default.vue writes it from the admin's theme colour
* alongside the other theme custom properties.
*/
:root {
--ds-primary: 33 98 135;
--ds-primary-foreground: 255 255 255;
--ds-muted-foreground: 100 116 139;
--ds-ring-offset: 255 255 255;
/* shadcn's `bg-background`. The content-box colour is admin-settable, but a
slide-out panel over a dimmed page has to stay opaque white, so this is not
wired to --content-box-color. */
--ds-background: 255 255 255;
}
/* The design's page shell. `container` here only gains auto margins: the
horizontal padding still comes from home.css, and adding padding would beat
the `px-0` some existing grids rely on. */
.container {
margin-left: auto;
margin-right: auto;
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---------------------------------------------------------------------------
Vuetify reset corrections.
`!important` is unavoidable here. There is no webpack-extracted CSS in this
build (dist/_nuxt carries no .css), so Vuetify's sheet and every component