/* =============================================================
   waine-tokens.css
   Delad varumärkesgrund för alla WAINE-builders (offert.waine.se m.fl.)
   Importera först i varje builder:  <link rel="stylesheet" href="/waine-tokens.css">
   Då ser allt enhetligt ut och PDF-exporten blir konsekvent.

   ✅  VARUMÄRKE hämtat ur waine.se:s produktions-CSS 2026-06-05:
       theme-color #0a0a0a, accent #ff5f61 (korall-röd, gradient mot #e54d4f),
       typsnitt Inter (vikter 200–600). Neutralskalan nedan är designsystemets egen.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap");

:root {
  /* ---------- VARUMÄRKE (hämtat ur waine.se 2026-06-05) ---------- */
  --waine-black:           #0a0a0a;   /* bekräftad theme-color */
  --waine-accent:          #ff5f61;   /* korall-röd — signaturfärg */
  --waine-accent-dark:     #e54d4f;   /* gradient-slut / hover */
  --waine-accent-light:    #ff7a7c;   /* ljus tint / hover */
  --waine-accent-ink:      #ffffff;   /* text ovanpå accent */
  --waine-accent-gradient: linear-gradient(135deg, #ff5f61, #e54d4f); /* primärknapp på waine.se */

  --font-heading: "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  /* ---------- Neutralskala ---------- */
  --gray-950: #0a0a0a;
  --gray-900: #141414;
  --gray-800: #1f1f1f;
  --gray-700: #2e2e2e;
  --gray-600: #4a4a4a;
  --gray-500: #6e6e6e;
  --gray-400: #9a9a9a;
  --gray-300: #c4c4c4;
  --gray-200: #e2e2e2;
  --gray-100: #f1f1f1;
  --gray-050: #f8f8f8;
  --white:    #ffffff;

  /* ---------- Semantiska ytor (ljust UI som standard) ---------- */
  --bg:          var(--white);
  --surface:     var(--gray-050);
  --surface-2:   var(--gray-100);
  --border:      var(--gray-200);
  --border-strong: var(--gray-300);
  --text:        var(--gray-950);
  --text-muted:  var(--gray-500);
  --text-invert: var(--white);

  /* ---------- Status ---------- */
  --success: #1f9d55;
  --warning: #d98b00;
  --danger:  #d23b3b;
  --info:    #2d6cdf;

  /* ---------- Typografi-skala (1.250 major third) ---------- */
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-lg:  1.25rem;
  --text-xl:  1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;

  --leading-tight:  1.15;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------- Spacing (4px-bas) ---------- */
  --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;
  --space-10: 4rem;
  --space-12: 6rem;

  /* ---------- Radie / kant / skugga ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06);
  --shadow:    0 4px 16px rgba(10,10,10,0.10);
  --shadow-lg: 0 12px 40px rgba(10,10,10,0.16);

  /* ---------- Layout ---------- */
  --container: 1100px;
  --transition: 160ms ease;
}

/* =============================================================
   BAS-ELEMENT  (lättviktig reset så builders startar likadant)
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-xl); }
p  { margin: 0 0 var(--space-4); }
a  { color: var(--waine-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =============================================================
   KOMPONENTER  (delade klasser så varje builder ser lika ut)
   ============================================================= */

/* Knappar */
.waine-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: var(--transition);
  background: var(--waine-black); color: var(--text-invert);
}
.waine-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.waine-btn--accent    { background: var(--waine-accent-gradient); color: var(--waine-accent-ink); border-color: color-mix(in srgb, var(--waine-accent) 30%, transparent); }
.waine-btn--secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.waine-btn--ghost     { background: transparent; color: var(--text); border-color: var(--border-strong); }
.waine-btn:disabled   { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Inmatning */
.waine-input, .waine-textarea, .waine-select {
  font: inherit; width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); transition: var(--transition);
}
.waine-input:focus, .waine-textarea:focus, .waine-select:focus {
  outline: none; border-color: var(--waine-black);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}
.waine-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-muted); margin-bottom: var(--space-1); }

/* Kort + statusmärken */
.waine-card { background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.waine-badge { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  padding: 2px var(--space-2); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.04em; }
.waine-badge--success { background: color-mix(in srgb, var(--success) 15%, white); color: var(--success); }
.waine-badge--warning { background: color-mix(in srgb, var(--warning) 18%, white); color: var(--warning); }
.waine-badge--danger  { background: color-mix(in srgb, var(--danger) 15%, white);  color: var(--danger); }

/* =============================================================
   A4 / PDF  — gör att alla builders exporterar identiskt formaterat.
   Lägg innehållet i <div class="waine-page"> ... </div>
   ============================================================= */
.waine-page {
  width: 210mm; min-height: 297mm;
  padding: 18mm 16mm;
  margin: 0 auto var(--space-6);
  background: var(--white); color: var(--gray-950);
  box-shadow: var(--shadow-lg);
}
.waine-page__header { display: flex; justify-content: space-between;
  align-items: flex-start; border-bottom: 2px solid var(--waine-black);
  padding-bottom: var(--space-4); margin-bottom: var(--space-6); }
.waine-page__footer { border-top: 1px solid var(--border);
  padding-top: var(--space-3); margin-top: var(--space-8);
  font-size: var(--text-xs); color: var(--text-muted); }

.waine-no-break { break-inside: avoid; }

@media print {
  body { background: var(--white); }
  .waine-no-print { display: none !important; }   /* dölj UI-kontroller vid PDF-export */
  .waine-page {
    width: auto; min-height: auto; margin: 0;
    box-shadow: none; padding: 0;
  }
  @page { size: A4; margin: 16mm; }
}