/*
 * Visit Umeå — Evenemangskompis Admin Panel
 * Design tokens + base layer.
 *
 * Extracted from the live theme at visitumea.se
 * (themes/custom/citybreakweb/cb_umea, app.css) on 2026-06-16.
 * This is the canonical token source for the admin panel. Component
 * frameworks (or hand-written CSS) should consume these custom properties
 * rather than hard-coding hex values.
 *
 * Fonts are self-hosted under ./fonts/ — Figtree (Google, OFL) for body
 * text and the proprietary Umeå display face for headings.
 */

/* ── Fonts ─────────────────────────────────────────────────────────── */
@import url("./fonts/figtree.css"); /* Figtree 400 / 500 / 700 */

@font-face {
  font-family: "Umea";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./fonts/Umea-ExtraBold.woff2") format("woff2");
}

/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand palette (from app.css; frequency-ranked) */
  --vu-cream:          #fcf3ea; /* page background — the signature warm off-white */
  --vu-cream-2:        #f9e8d5; /* deeper cream surface / hover */
  --vu-cream-3:        #faebdd;
  --vu-ink:            #212529; /* primary text (near-black) */
  --vu-black:          #000000;
  --vu-white:          #ffffff; /* card / box surface */

  --vu-violet:         #7459ff; /* primary accent — links, active state, focus */
  --vu-violet-strong:  #4926ff; /* violet hover / pressed */
  --vu-violet-darkest: #340dff;
  --vu-lavender:       #d6cbfe; /* primary BUTTON fill (black text on lavender) */
  --vu-lavender-2:     #c9bfff;
  --vu-lavender-3:     #b4a6ff;

  --vu-navy:           #003660; /* secondary button / strong headers (white text) */
  --vu-blue:           #0368ff; /* informational links / accents */
  --vu-blue-dark:      #0057d9;
  --vu-coral:          #ff8552; /* warm accent / warning highlight */

  --vu-danger:         #ac2925; /* destructive actions, errors */
  --vu-danger-bright:  #d90000;
  --vu-success:        #003660; /* the theme uses navy for success; override if a green is wanted */

  /* Neutrals / grays */
  --vu-gray-900:       #212529;
  --vu-gray-700:       #6f6f6f;
  --vu-gray-600:       #8a8a8a;
  --vu-gray-500:       #929292;
  --vu-gray-400:       #b5b5b5;
  --vu-gray-300:       #cacaca;
  --vu-gray-250:       #dadada;
  --vu-gray-200:       #e8e8e8;
  --vu-gray-100:       #f1f1f1;

  /* Semantic surface aliases (admin panel) */
  --surface-page:      var(--vu-cream);
  --surface-card:      var(--vu-white);
  --surface-sunken:    var(--vu-cream-2);
  --border-subtle:     var(--vu-gray-200);
  --border-strong:     var(--vu-gray-300);
  --text-primary:      var(--vu-ink);
  --text-muted:        var(--vu-gray-700);
  --accent:            var(--vu-violet);

  /* Typography */
  --font-display: "Umea", "Figtree", system-ui, sans-serif; /* hero / page titles */
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (rem; mirrors the theme's common steps) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.9rem;
  --fs-base: 1rem;
  --fs-md:   1.1rem;
  --fs-lg:   1.2rem;
  --fs-xl:   1.4rem;
  --fs-2xl:  1.6rem;
  --fs-3xl:  2.5rem;
  --fs-display: 5rem; /* hero only; avoid in dense admin UI */

  --lh-tight: 1.2;
  --lh-base:  1.6;

  /* Shape — the theme is flat with small radii */
  --radius-sm: 2px;
  --radius:    4px;  /* .25rem — default for buttons, inputs, cards */
  --radius-lg: 8px;
  --radius-pill: 2rem;

  /* Elevation — used sparingly; the brand is mostly flat */
  --shadow-card:    0 0 20px rgba(0, 0, 0, 0.10);
  --shadow-overlay: 0 5px 20px rgba(0, 0, 0, 0.15);

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Focus ring — accessibility, keyed to the brand violet */
  --focus-ring: 0 0 0 3px rgba(116, 89, 255, 0.45);
}

/* ── Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Global type scale — everything is rem-based, so nudging the root font-size
   up ~10% scales all text (and proportional spacing) uniformly. `:root` beats
   Pico's own root font-size on specificity. */
:root { font-size: 110%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: var(--lh-tight); margin: 0 0 var(--space-4); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* Reserve the Umeå display face for the masthead / page title only. */
.display-title { font-family: var(--font-display); font-weight: 800; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Components ────────────────────────────────────────────────────── */
/* Card / box — the core layout primitive: white box on cream page. */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-5);
}

/* Buttons — BEM, mirroring the theme's .btn--* variants. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: underline; }
.btn--primary   { background: var(--vu-lavender); color: var(--vu-black); }
.btn--secondary { background: var(--vu-navy); color: var(--vu-white); }
.btn--danger    { background: transparent; color: var(--vu-danger); border-color: var(--vu-danger); }
.btn--danger:hover { background: var(--vu-danger); color: var(--vu-white); text-decoration: none; }
.btn:disabled  { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

/* Form fields */
.field {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.field:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); }