/* =========================================================================
   Tante Toos — Design Tokens
   Source of truth: tantetoos-website-new/src/app/globals.css
   Reuse these variables + utility classes anywhere (web, print, docs).
   ========================================================================= */

:root {
  /* ---------- Brand palette ---------- */
  --color-brand-orange:      #f15a24;
  --color-brand-orange-deep: #c83e0d;
  --color-brand-orange-soft: #ff8559;
  --color-brand-teal:        #1f7a6e;
  --color-brand-teal-deep:   #0e4d44;
  --color-brand-teal-soft:   #5fbfae;
  --color-brand-acid:        #f2c94c;   /* mustard accent */
  --color-brand-night:       #0c0a09;   /* deep neutral   */

  /* ---------- Surfaces (warm neutral family) ---------- */
  --color-cream-50:  #fbf6ee;
  --color-cream-100: #f4ebd9;
  --color-cream-200: #e9dfc8;
  --color-cream-300: #d6c7a5;
  --color-stone-700: #423832;
  --color-stone-800: #1f1a17;
  --color-stone-900: #0c0a09;

  /* ---------- Status ---------- */
  --color-status-open:   #1f9b66;
  --color-status-soon:   #f15a24;
  --color-status-closed: #c84a32;

  /* ---------- Semantic ---------- */
  --background: var(--color-cream-50);
  --foreground: var(--color-stone-900);
  --muted:      var(--color-stone-700);
  --line:       rgba(12, 10, 9, 0.1);

  /* ---------- Type ---------- */
  --font-sans:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;
  --font-display: "Big Shoulders Display", "Geist", ui-sans-serif, system-ui, sans-serif;

  /* ---------- Radii / shadow ---------- */
  --radius-pill: 999px;
  --radius-card: 1.25rem;

  --shadow-soft: 0 1px 0 rgba(12, 10, 9, 0.05), 0 10px 28px -14px rgba(241, 90, 36, 0.28);
  --shadow-lift: 0 2px 0 rgba(12, 10, 9, 0.07), 0 28px 56px -22px rgba(241, 90, 36, 0.42);
  --shadow-acid: 0 2px 0 rgba(12, 10, 9, 0.07), 0 28px 56px -22px rgba(242, 201, 76, 0.6);
}

/* ---------- Base ---------- */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-brand-orange); color: #fff; }

/* ---------- Display headlines: condensed, heavy, poster-style ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.86;
  text-transform: uppercase;
  text-wrap: balance;
}
.display-tight {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.82;
  text-transform: uppercase;
}

/* ---------- Highlighted word: block accent, skewed, no italic ---------- */
.hl {
  position: relative;
  display: inline-block;
  padding: 0.1em 0.18em;
  background: var(--color-brand-orange);
  color: var(--color-cream-50);
  transform: skew(-6deg);
}
.hl-teal    { background: var(--color-brand-teal); color: var(--color-cream-50); }
.hl-acid    { background: var(--color-brand-acid); color: var(--color-stone-900); }
.hl-outline {
  background: transparent;
  color: var(--color-brand-orange);
  -webkit-text-stroke: 2px currentColor;
  padding: 0;
  transform: none;
}

/* ---------- Eyebrow (mono, tracked-out, uppercase label) ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Buttons (pill) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  border: 0;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, color 200ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary   { background: var(--color-brand-orange); color: var(--color-cream-50); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--color-brand-orange-deep); box-shadow: var(--shadow-lift); }

.btn-dark      { background: var(--color-stone-900); color: var(--color-cream-50); box-shadow: var(--shadow-soft); }
.btn-dark:hover    { background: var(--color-brand-orange); }

.btn-teal      { background: var(--color-brand-teal); color: var(--color-cream-50); }
.btn-teal:hover    { background: var(--color-brand-teal-deep); }

.btn-secondary { background: transparent; color: var(--color-stone-900); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--color-cream-100); border-color: rgba(12,10,9,0.2); }

/* ---------- Card ---------- */
.card {
  background: var(--color-cream-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* ---------- Divider ---------- */
.divider { height: 1px; background: linear-gradient(to right, transparent, var(--line), transparent); }

/* ---------- Status LED dot ---------- */
.status-led {
  box-shadow:
    0 0 0 2px color-mix(in srgb, currentColor 16%, transparent),
    0 0 7px color-mix(in srgb, currentColor 75%, transparent);
}
.status-led-open   { color: var(--color-status-open);   background: var(--color-status-open); }
.status-led-soon   { color: var(--color-status-soon);   background: var(--color-status-soon); }
.status-led-closed { color: var(--color-status-closed); background: var(--color-status-closed); }