/* ═══════════════════════════════════════════════════════════════
 * SPICK Typography — canonical 8-tier token-system
 * Created: 2026-05-18 (S36 / Wave-2 #1 extraction-trigger)
 * Per docs/blueprints/195 + 218 + 249-doc canonical-spec
 *
 * USAGE (via CSS variables):
 *   font-family: var(--font-display);
 *   font-size: var(--type-display);
 *
 * USAGE (via utility-classes):
 *   <div class="type-display">36 px Playfair Display 500</div>
 *   <div class="type-label">UPPERCASE LABEL</div>
 *
 * BROWSER-COMPAT: CSS custom-properties supported all modern browsers
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* Font families */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Sizes — DESKTOP defaults */
  --type-display: 48px;
  --type-h1: 32px;
  --type-h2: 24px;
  --type-h3: 18px;
  --type-body: 16px;
  --type-small: 13px;
  --type-micro: 11px;
  --type-label: 12px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Line-heights (inverse-to-size pattern) */
  --lh-display: 1.1;
  --lh-h1: 1.2;
  --lh-h2: 1.3;
  --lh-h3: 1.4;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-micro: 1.4;

  /* Letter-spacing */
  --ls-label: 0.5px;
  --ls-default: 0;

  /* Colors */
  --color-text: #1C1C1A;
  --color-text-muted: #6B6960;
  --color-text-divider: #9CA3AF;
  --color-brand: #0F6E56;
}

@media (max-width: 480px) {
  :root {
    --type-display: 36px;
    --type-h1: 28px;
    --type-h2: 20px;
    --type-h3: 17px;
    --type-micro: 12px;
  }
}

/* Utility-classes (use composition or direct CSS-var) */
.type-display { font-family: var(--font-display); font-size: var(--type-display); font-weight: var(--weight-medium); line-height: var(--lh-display); color: var(--color-brand); }
.type-h1 { font-family: var(--font-display); font-size: var(--type-h1); font-weight: var(--weight-medium); line-height: var(--lh-h1); color: var(--color-text); }
.type-h2 { font-family: var(--font-display); font-size: var(--type-h2); font-weight: var(--weight-medium); line-height: var(--lh-h2); color: var(--color-text); }
.type-h3 { font-family: var(--font-body); font-size: var(--type-h3); font-weight: var(--weight-semibold); line-height: var(--lh-h3); color: var(--color-text); }
.type-body { font-family: var(--font-body); font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--lh-body); color: var(--color-text); }
.type-small { font-family: var(--font-body); font-size: var(--type-small); font-weight: var(--weight-regular); line-height: var(--lh-small); color: var(--color-text-muted); }
.type-micro { font-family: var(--font-body); font-size: var(--type-micro); font-weight: var(--weight-regular); line-height: var(--lh-micro); color: var(--color-text-muted); }
.type-label { font-family: var(--font-body); font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════════════
 * Product UI typography (transactional / operational surfaces)
 * Added 2026-05-24 (Wave-2 PR-A — Product Typography SSOT)
 *
 * Codifies the de-facto hybrid policy already operating in prod:
 *   - .type-display / .type-h1 / .type-h2 (Playfair Display above)
 *     → celebration / marketing-emotional surfaces (e.g. tack)
 *   - .type-product-* (Plus Jakarta Sans / DM Sans below)
 *     → transactional / operational surfaces (mitt-konto, min-bokning,
 *       admin, foretag-dashboard, etc.)
 *
 * SCOPE NOTE: Adding these classes is visually neutral by design —
 * no rule consumes them yet. Subsequent merges will progressively
 * adopt them on existing product UI headings (one surface at a time).
 * ═══════════════════════════════════════════════════════════════ */

.type-product-h1{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:1.6rem;
  font-weight:700;
  line-height:1.25;
  color:var(--color-text);
}

.type-product-h2{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:1.2rem;
  font-weight:600;
  line-height:1.3;
  color:var(--color-text);
}

.type-product-label{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--color-text-muted);
}