/* ── Keymono Brand Theme ──────────────────────────────────────────────────
   The single brand stylesheet for both Vaadin applications, served from this
   module's META-INF/resources and loaded via @StyleSheet on each app shell.

   It brands Aura by setting Aura's *base* tokens and letting Aura derive text
   colours, surfaces and borders from them. Derived (unsuffixed) Aura
   properties are read-only and are never assigned here.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Font faces ── */

@font-face {
  font-family: "Jockey One";
  src: url("./fonts/jockeyone/jockeyone-regular-webfont.woff2") format("woff2"),
       url("./fonts/jockeyone/jockeyone-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Liberation";
  src: url("./fonts/liberation/LiberationSans-Regular.woff2") format("woff2"),
       url("./fonts/liberation/LiberationSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Monaco";
  src: url("./fonts/monaco/monaco.woff2") format("woff2"),
       url("./fonts/monaco/monaco.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* ── Brand tokens ──
   Base values are the literals from app/store/frontend/src/app.css; the derived
   shades are that file's relative-OKLCH expressions, not pre-computed copies
   of them. Only the shades these two applications actually use are carried
   over — the storefront's palette is wider, and importing the rest would put
   names here that nothing resolves. */

:root {
  --k-yellow:    oklch(0.8878 0.141 54.32);
  --k-ivory:     oklch(0.9991 0.0407 40.36);
  --k-coral:     oklch(0.6839 0.1525 24.32);
  --k-darkblue:  oklch(0.4248 0.0486 204.68);
  --k-lightblue: oklch(0.8656 0.0221 170.05);
  --k-green:     oklch(0.7772 0.0776 149.33);
  --k-jade:      oklch(0.375 0.0431 183.13);

  /* lightblue family */
  --k-lightblue-bright: oklch(from var(--k-lightblue) calc(l + 0.0293) c h);
  --k-lightblue-soft:   oklch(from var(--k-lightblue) calc(l + 0.0573) c h);
  --k-lightblue-pale:   oklch(from var(--k-lightblue) calc(l + 0.0709) c h);
  --k-lightblue-frost:  oklch(from var(--k-lightblue) calc(l + 0.0919) c h);

  /* darkblue family */
  --k-darkblue-abyss:  oklch(from var(--k-darkblue) calc(l - 0.1933) c h);
  --k-darkblue-deep:   oklch(from var(--k-darkblue) calc(l - 0.061)  c h);
  --k-darkblue-shade:  oklch(from var(--k-darkblue) calc(l - 0.04)   c h);
  --k-darkblue-tint:   oklch(from var(--k-darkblue) calc(l + 0.0369) c h);
  --k-darkblue-bright: oklch(from var(--k-darkblue) calc(l + 0.1606) c h);
  --k-darkblue-sky:    oklch(from var(--k-darkblue) calc(l + 0.24)   c h);

  --font-jockey: "Jockey One", Impact, sans-serif;
  --font-sans:   "Liberation", "Noto Sans", Arial, sans-serif;
  --font-mono:   "Monaco", "Courier New", monospace;
}

/* ── Aura base tokens ──
   These four decide almost everything: Aura computes text colours, surface
   steps, borders and focus rings from them. Both apps are dark-only, so the
   dark variants carry the brand; the light ones are set to a plausible value
   so that adding a light mode later is a colour-scheme switch, not a redesign.
   Aura's light-dark() switching keys off `color-scheme`, which is why it is set
   here rather than expressed per property. */

:root {
  color-scheme: dark;

  --aura-background-color-dark:  var(--k-darkblue);
  --aura-background-color-light: var(--k-lightblue-pale);

  /* Plain brand coral. The primary button's label is black because Aura derives
     it by contrast and coral is light enough for that. Do not darken the accent
     to force a white label: Aura clamps the focus ring at max(l, 0.62), so an
     accent dark enough to flip the label leaves the ring a different coral from
     the surface it surrounds. The two thresholds do not overlap — measured, see
     design.md D8. */
  --aura-accent-color-dark:  var(--k-coral);
  --aura-accent-color-light: var(--k-coral);

  --aura-font-family: var(--font-sans);

  /* The single knob that sets buttons and input fields off against the canvas,
     raised from Aura's default of 1. It governs borders and text only — for
     panel surfaces see --aura-surface-level below. */
  --aura-contrast-level: 2;

  /* How far panels, cards and overlays sit from the canvas, in steps of 0.03
     lightness. Negative goes darker, which is the direction this brand wants:
     Aura's positive default leaves a rendered difference of 0.006 against this
     canvas, which no eye reads as a panel. Surfaces stay translucent at any
     level, so the gradient shows through them. */
  --aura-surface-level: -4;

  /* Aura's focus ring is 2px of the coral accent. On an input field that is a
     heavy frame next to the field's own 1px border; one pixel marks focus just
     as clearly. Colour and shape stay Aura's — only the width changes. */
  --vaadin-focus-ring-width: 1px;
}

/* ── Background gradient (matches the storefront's atmosphere) ──
   The page canvas is the brand gradient, painted on :root — not html, which
   would lose the specificity contest against Aura's own :root rule. */

:root {
  background: linear-gradient(0deg, var(--k-darkblue-tint), var(--k-darkblue));
  min-height: 100vh;
}

html::before,
html::after {
  content: "";
  position: fixed;
  width: 100vw;
  height: 30vw;
  pointer-events: none;
  z-index: -1;
}

html::before {
  top: 0;
  background: linear-gradient(169deg,
    oklch(from var(--k-darkblue-deep) l c h / 0.5),
    oklch(from var(--k-darkblue-deep) l c h / 0) 50%);
}

html::after {
  bottom: 0;
  background: linear-gradient(169deg,
    oklch(from var(--k-lightblue-pale) l c h / 0) 50%,
    oklch(from var(--k-lightblue-pale) l c h / 0.3));
}

/* Let the gradient show through Vaadin's layout surfaces */
vaadin-app-layout,
vaadin-app-layout::part(content) {
  background: transparent;
}

/* Vaadin puts grid cell contents in the light DOM, so with a horizontally
   scrolled grid they stick out past the content area's right edge and get
   counted into its scroll width — an 83px scrollbar under a view that has
   nothing to scroll. The grid brings its own scrollbars for its own overflow. */
vaadin-app-layout::part(content) {
  overflow-x: hidden;
}

/* ── Scrollbars ──
   Aura ships no scrollbar styling at all, so they arrive as raw browser
   chrome on a dark canvas. `color-scheme: dark` alone only makes them dark,
   not quiet. Thin, brand-coloured, and transparent tracks so they read as
   part of the surface they sit on rather than as furniture on top of it. */

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--k-lightblue) 25%, transparent) transparent;
}

*:hover {
  scrollbar-color: color-mix(in srgb, var(--k-lightblue) 40%, transparent) transparent;
}

/* ── Body text ──
   Aura derives --vaadin-text-color from the background token; the brand wants
   lightblue rather than that neutral. Components that set the property on
   themselves (buttons, fields, overlays) keep Aura's derived value, which is
   what carries their own contrast. */

:root {
  --vaadin-text-color: var(--k-lightblue);
}

/* ── Headings: Jockey One display font ── */

h1, h2, h3, h4 {
  font-family: var(--font-jockey);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--k-ivory);
}

/* ── Input fields: hover affordance ──
   Aura styles hover for field buttons, tabs and select options, but leaves the
   input surface itself unchanged — so a text field gives no sign that it can be
   clicked.

   The element-less `::part(input-field)` selector is Aura's own idiom (it uses
   `:not([readonly],[disabled])::part(field-button):hover`) and covers every
   field type at once — text, password, area, combo box, select, date and number
   pickers — instead of a list of a dozen component names that would go stale. */

::part(input-field) {
  transition: border-color 0.15s;
}

:hover:not([readonly], [disabled])::part(input-field) {
  border-color: color-mix(in srgb, var(--vaadin-text-color) 45%, transparent);
}

/* ── Grid: bold header cells ── */

vaadin-grid::part(header-cell) {
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--aura-font-size-s);
  letter-spacing: 0.05em;
}

/* ── App shell branding ──
   Drawer and navbar carry brand colours rather than Aura's derived surfaces;
   they are chrome, not content. */

vaadin-scroller[slot="drawer"] {
  padding: var(--vaadin-gap-s);
}

[slot="drawer"]:is(header, footer) {
  display: flex;
  align-items: center;
  gap: var(--vaadin-gap-s);
  padding: var(--vaadin-gap-s) var(--vaadin-gap-l);
  min-height: 3rem;
  box-sizing: border-box;
}

[slot="drawer"]:is(header, footer):is(:empty) {
  display: none;
}

vaadin-app-layout::part(drawer) {
  background: var(--k-jade);
  color: var(--k-lightblue);
  /* Aura insets the content area and gives the drawer a matching padding on the
     side facing it. Painting the drawer part fills that inset too, so the
     content's border ends up flush against the jade with no gap, while the far
     side keeps its inset — the asymmetry reads as a mistake. Clipping the paint
     to the content box leaves Aura's gap where Aura put it. */
  background-clip: content-box;
}

vaadin-app-layout::part(navbar) {
  background: var(--k-darkblue);
}

[slot="drawer"] h1 {
  font-family: var(--font-jockey);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--k-ivory);
}

vaadin-side-nav-item[active] {
  color: var(--k-coral);
}

/* ── Shared layout helpers ── */

.km-view-title {
  font-size: var(--aura-font-size-l);
  margin: 0;
}

.app-header {
  padding-block: 0;
  padding-inline: var(--vaadin-gap-l);
}

.km-dashboard-header {
  margin-top: 2.5rem;
  margin-bottom: var(--vaadin-gap-l);
}