/* Cali Coffee — brand tokens + base styles.
   Palette sourced from brand logos (cyan/yellow) and calicoffee.com UI (navy).
   Every page loads this first; page CSS uses the variables, never raw hex. */

:root {
  /* Brand */
  --cali-navy: #214b70;        /* primary UI: headers, buttons, nav */
  --cali-blue: #02a9e0;        /* accent: links, focus, active states */
  --cali-yellow: #ffc82c;      /* highlight: callouts, badges — use sparingly */

  /* Status */
  --cali-red: #bd2928;
  --cali-red-bg: #f8ebec;
  --cali-green: #2e7d4f;
  --cali-green-bg: #eaf4ee;

  /* Neutrals */
  --cali-ink: #1c2733;         /* body text */
  --cali-muted: #757575;       /* secondary text (matches their site) */
  --cali-line: #e3e8ee;        /* borders, dividers */
  --cali-bg: #f6f8fa;          /* page background */
  --cali-card: #ffffff;

  /* Type — 'Como' is Cali's licensed webfont; stack degrades gracefully */
  --cali-font: "Como", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Shape */
  --cali-radius: 8px;
  --cali-shadow: 0 1px 3px rgba(28, 39, 51, 0.08);

  /* Field icon slot — the custom-select trigger reserves a fixed leading icon
     slot (width + gap before the label), so its label starts at
     base-pad + icon-w + gap. These tokens are shared: cali-components.css sizes
     .cali-select__icon / the trigger gap from them, and plain inputs/textareas/
     native selects add the same inset (below) so ALL field content lines up. */
  --cali-field-icon-w: 1.4em;
  --cali-field-icon-gap: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--cali-font);
  color: var(--cali-ink);
  background: var(--cali-bg);
}

h1, h2, h3 { color: var(--cali-navy); }

a { color: var(--cali-blue); }

.cali-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: var(--cali-radius);
  background: var(--cali-navy);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cali-btn:hover { background: #1a3c5a; }
.cali-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cali-btn--accent { background: var(--cali-blue); }
.cali-btn--ghost {
  background: transparent;
  color: var(--cali-navy);
  border: 2px solid var(--cali-navy);
}

.cali-card {
  background: var(--cali-card);
  border: 1px solid var(--cali-line);
  border-radius: var(--cali-radius);
  box-shadow: var(--cali-shadow);
  padding: 20px;
}

.cali-input {
  width: 100%;
  padding: 10px 12px 10px 8px;
  border: 1px solid var(--cali-line);
  border-radius: var(--cali-radius);
  font-family: inherit;
  font-size: 14px;
}
.cali-input:focus {
  outline: none;
  border-color: var(--cali-blue);
  box-shadow: 0 0 0 3px rgba(2, 169, 224, 0.25);
}
/* Align field content left edges. The custom-select trigger is a
   <button class="cali-input"> that internally reserves the icon slot, so its
   label starts at base-pad(8px) + icon-w + gap. Give plain inputs/textareas/
   native selects that same inset so their text/placeholder lines up with the
   custom-select label. Element-scoped (input./textarea./select.) so the trigger
   <button> is untouched — no double indent. Shares the icon-w/gap tokens with
   .cali-select__icon so the two can never drift. */
input.cali-input,
textarea.cali-input,
select.cali-input {
  padding-left: calc(8px + var(--cali-field-icon-w) + var(--cali-field-icon-gap));
}

/* Loading state — animated brand mark (assets/cali-loader.svg).
   Usage: <img class="cali-loader" src="/assets/cali-loader.svg" alt="Loading">
   The waves animate via CSS inside the SVG itself (works in <img>, no JS). */
.cali-loader {
  width: 64px;
  height: 64px;
  display: block;
  margin: 40px auto;
}
.cali-loader--sm { width: 32px; height: 32px; margin: 12px auto; }

.cali-error {
  background: var(--cali-red-bg);
  color: var(--cali-red);
  border-radius: var(--cali-radius);
  padding: 10px 12px;
  font-weight: 600;
  font-size: 14px;
}

/* Cross-document (MPA) View Transitions — subtle cross-fade on same-origin
   page navigation. Progressive enhancement: unsupported browsers just navigate. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }

/* Give the main content its own transition so navigation is actually felt:
   old fades out quickly, new slides up slightly + fades in. The JS-injected
   nav stays in the root cross-fade (unnamed) to avoid a flash. */
main { view-transition-name: cali-main; }

/* Keep the top nav visually persistent across cross-document navigations:
   naming it makes the browser treat it as the same element, so it holds
   position instead of cross-fading. The reduced-motion guard below (wildcard
   ::view-transition-*) already covers this named group. */
.cali-nav { view-transition-name: cali-nav; }

@keyframes cali-vt-out { to { opacity: 0; } }
@keyframes cali-vt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
::view-transition-old(cali-main) { animation: cali-vt-out 120ms ease both; }
::view-transition-new(cali-main) { animation: cali-vt-in 220ms ease both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}