/* LIVELO Design System — Tokens
 * Scandinavian minimalism: white canvas, charcoal text, one green accent.
 */

:root {
  /* ── Colors ─────────────────────────────────────────── */

  /* Neutrals */
  --bg:            #FFFFFF;   /* page canvas */
  --panel:         #FAFAFA;   /* card / viewer background */
  --panel-alt:     #F7F7F7;   /* thumbnail tiles, secondary hover */
  --fg:            #1A1A1A;   /* primary text, charcoal */
  --fg-strong:     #0A0A0A;   /* headline on hover / total */
  --muted:         #6B7280;   /* secondary text, captions */
  --muted-soft:    #9CA3AF;   /* quiet labels, placeholders */

  /* Borders */
  --border:        #E5E7EB;   /* hairline dividers, card outline */
  --border-strong: #D1D5DB;   /* card hover, active tab outline */
  --border-dark:   #1A1A1A;   /* active tab box outline */

  /* Accent */
  --accent:        #22C55E;   /* primary CTA, selected radio */
  --accent-hover:  #16A34A;   /* pressed / hover */
  --accent-fg:     #FFFFFF;   /* text on accent */

  /* Semantic */
  --color-success: var(--accent);
  --color-focus:   var(--accent);

  /* ── Typography ─────────────────────────────────────── */

  --font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Fluid type scale */
  --fs-xs:    12px;                              /* captions */
  --fs-sm:    13px;                              /* muted labels */
  --fs-base:  15px;                              /* body */
  --fs-md:    16px;                              /* card title */
  --fs-lg:    18px;                              /* section heading */
  --fs-xl:    clamp(22px, 2.4vw, 28px);          /* total-bar price */
  /* H1: text-2xl / lg:text-3xl (24px → 30px) */
  --fs-h1:     1.5rem;                           /* 24px */
  --fs-h1-lg:  1.875rem;                        /* 30px @ ≥1024px */
  --fg-h1:     #000000;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing (Tailwind tracking-tight) */
  --ls-tight:   -0.025em;
  --ls-normal:  0;
  --ls-wide:    0.08em;     /* the LIVELO wordmark */

  /* ── Spacing (4px base) ─────────────────────────────── */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* ── Radii ──────────────────────────────────────────── */

  --r-xs:   4px;
  --r-sm:   6px;   /* thumbnails */
  --r-md:   8px;   /* cards, buttons, inputs (canonical) */
  --r-lg:   12px;
  --r-full: 9999px;

  /* ── Shadows ────────────────────────────────────────── */

  --shadow-none:  none;
  --shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 2px rgba(34, 197, 94, 0.35);

  /* ── Motion ─────────────────────────────────────────── */

  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-med:  180ms;
  --dur-slow: 250ms;

  /* ── Layout ─────────────────────────────────────────── */

  --header-h:    64px;
  --bottom-h:    72px;
  --tap-min:     44px;   /* mobile touch targets */
  --col-split:   62fr 38fr;   /* viewer / panel on desktop */
}

/* ── Semantic element defaults ────────────────────────── */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-h1);
  margin: 0;
}

@media (min-width: 1024px) {
  h1 { font-size: var(--fs-h1-lg); }
}

h2 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0;
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.wordmark {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}