/* ============================================================
   Bettwerk — colors & type tokens
   Source of truth: UI/UX Design Brief, Section 4.
   Mirror this file into globals.css when scaffolding the Next app.
   ============================================================ */

/* -------- Fonts (CDN; swap to next/font/google in app) -------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ------------- Neutral (Stone, warm) — 90% of the UI ------------- */
  --neutral-50:  #FAFAF9;  /* page bg */
  --neutral-100: #F5F5F4;  /* surface secondary, hover */
  --neutral-200: #E7E5E4;  /* hairlines, dividers */
  --neutral-300: #D6D3D1;  /* borders */
  --neutral-400: #A8A29E;  /* tertiary text, muted icons */
  --neutral-500: #78716C;  /* secondary text */
  --neutral-700: #44403C;  /* primary text on light */
  --neutral-900: #1C1917;  /* headings */

  /* ------------- Brand — gedecktes Tannengrün ------------- */
  --brand-50:  #F0F4F1;
  --brand-100: #DCE6DD;
  --brand-300: #8FB098;
  --brand-500: #4A7553;  /* primary */
  --brand-700: #2F4D38;
  --brand-900: #1A2C1F;

  /* ------------- Semantic (status, badges, toasts) ------------- */
  --success-bg: #ECFDF5;  --success-fg: #047857;
  --warning-bg: #FFFBEB;  --warning-fg: #B45309;
  --danger-bg:  #FEF2F2;  --danger-fg:  #B91C1C;
  --info-bg:    #EFF6FF;  --info-fg:    #1D4ED8;

  /* ------------- Booking status accents (Section 4.1 table) ------------- */
  --status-requested-bg:  #FFFBEB;  --status-requested-fg:  #B45309;  /* amber */
  --status-confirmed-bg:  var(--brand-50);  --status-confirmed-fg:  var(--brand-700);
  --status-rejected-bg:   var(--neutral-100); --status-rejected-fg: #525252;
  --status-cancelled-bg:  var(--neutral-100); --status-cancelled-fg: #525252;
  --status-invoiced-bg:   #F0F9FF;  --status-invoiced-fg:   #0369A1;  /* sky */
  --status-paid-bg:       var(--success-bg);  --status-paid-fg:       var(--success-fg);
  --status-checkedin-bg:  #F5F3FF;  --status-checkedin-fg:  #6D28D9;  /* violet */
  --status-checkedout-bg: var(--neutral-100); --status-checkedout-fg: #525252;
  --status-completed-bg:  var(--neutral-100); --status-completed-fg:  var(--neutral-700);

  /* ------------- Semantic surface tokens ------------- */
  --bg-page:        var(--neutral-50);
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   var(--neutral-100);
  --bg-hover:       var(--neutral-100);
  --fg-default:     var(--neutral-700);
  --fg-muted:       var(--neutral-500);
  --fg-subtle:      var(--neutral-400);
  --fg-strong:      var(--neutral-900);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --focus-ring:     var(--brand-500);

  /* ------------- Spacing — 8px grid (multiples of 4) ------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ------------- Radius ------------- */
  --radius-sm: 4px;
  --radius:    6px;   /* default */
  --radius-lg: 10px;  /* cards */
  --radius-pill: 9999px;  /* status pills only */

  /* ------------- Borders ------------- */
  --border-1: 1px;
  --border-thin: 0.5px;  /* high-DPI separators only */

  /* ------------- Shadows — practically none ------------- */
  --shadow-sm: 0 1px 2px 0 rgb(28 25 23 / 0.04), 0 1px 3px 0 rgb(28 25 23 / 0.06);
  --shadow-pop: 0 4px 12px -2px rgb(28 25 23 / 0.08), 0 2px 4px -1px rgb(28 25 23 / 0.04);
  /* Cards never use shadow — border only. */

  /* ------------- Motion ------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med:  200ms;
  --dur-slow: 300ms;

  /* ------------- Type ------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* base */
  --text-xs:   12px;   --lh-xs:   1.4;
  --text-sm:   14px;   --lh-sm:   1.5;
  --text-base: 16px;   --lh-base: 1.6;
  --text-lg:   18px;   --lh-lg:   1.5;
  --text-xl:   20px;   --lh-xl:   1.4;
  --text-2xl:  24px;   --lh-2xl:  1.3;
  --text-3xl:  30px;   --lh-3xl:  1.2;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
}

/* -------- Dark mode (Sprint 1 mandatory; toggle ships v1.1) -------- */
[data-theme="dark"] {
  --neutral-50:  #0C0A09;
  --neutral-100: #1C1917;
  --neutral-200: #292524;
  --neutral-300: #44403C;
  --neutral-400: #78716C;
  --neutral-500: #A8A29E;
  --neutral-700: #D6D3D1;
  --neutral-900: #FAFAF9;

  --brand-50:  #1A2C1F;
  --brand-100: #2F4D38;
  --brand-300: #4A7553;
  --brand-500: #8FB098;
  --brand-700: #DCE6DD;
  --brand-900: #F0F4F1;

  --success-bg: #052E1B;  --success-fg: #6EE7B7;
  --warning-bg: #2A1A05;  --warning-fg: #FBBF24;
  --danger-bg:  #2D0A0A;  --danger-fg:  #FCA5A5;
  --info-bg:    #0B1F3A;  --info-fg:    #93C5FD;

  --bg-page:    #0C0A09;
  --bg-surface: #1C1917;
  --bg-surface-2: #292524;
  --bg-hover:   #292524;
  --fg-default: #D6D3D1;
  --fg-muted:   #A8A29E;
  --fg-subtle:  #78716C;
  --fg-strong:  #FAFAF9;
  --border-default: #292524;
  --border-strong:  #44403C;
}

/* ============================================================
   Semantic typography (h1..h4, p, code, mono, label, helper)
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-page);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: var(--weight-semibold);
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .h2 {
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: var(--weight-semibold);
  color: var(--fg-strong);
  letter-spacing: -0.005em;
  margin: 0;
}
h3, .h3 {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: var(--weight-semibold);
  color: var(--fg-strong);
  margin: 0;
}
h4, .h4 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: var(--weight-medium);
  color: var(--fg-strong);
  margin: 0;
}
p, .body {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-default);
  margin: 0;
}
.ui {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-default);
}
.helper, small {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--fg-muted);
}
.label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-default);
}
.mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Focus ring — brand-500, 2px offset (Section 10)
   ============================================================ */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}