/* ============================================
   CALIBER — Design Tokens
   Quiet luxury operator's console
   ============================================ */

:root {
  /* Surfaces — warm cream paper */
  --bg:           #FAF8F4;
  --surface:      #FFFFFF;
  --surface-2:    #F4EFE7;
  --surface-3:    #ECE6DA;
  --overlay:      rgba(26, 24, 20, 0.55);

  /* Ink — warm charcoal */
  --ink:          #1A1814;
  --ink-soft:     #4D453C;
  --ink-mute:     #6B6259;
  --ink-quiet:    #A8A096;
  --ink-faint:    #C9C2B5;

  /* Lines */
  --line:         #E8E2D7;
  --line-soft:    #F0EAE0;
  --line-strong:  #D4CCBE;

  /* Brand accent — earthy gold, used sparingly */
  --gold:         #B8915A;
  --gold-soft:    #D4B587;
  --gold-deep:    #8F6F40;
  --gold-tint:    #F5EBD8;

  /* Status — warm semantics */
  --hot:          #1A1814;
  --warm:         #B8915A;
  --cool:         #A8A096;
  --danger:       #8B3A2E;
  --danger-tint:  #F4E3DE;
  --success:      #4A5D3F;
  --success-tint: #E3EADE;
  --info:         #4A5466;
  --info-tint:    #DEE2EA;

  /* Type */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'SF Mono', monospace;

  /* Scale — modular, 1.25 ratio */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  88px;

  /* Spacing — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radii — restrained, mostly sharp */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-full: 999px;

  /* Shadows — almost none; the design relies on lines */
  --shadow-sm: 0 1px 0 rgba(26, 24, 20, 0.04);
  --shadow-md: 0 2px 8px rgba(26, 24, 20, 0.06), 0 1px 2px rgba(26, 24, 20, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 24, 20, 0.08), 0 2px 4px rgba(26, 24, 20, 0.04);
  --shadow-popover: 0 8px 24px rgba(26, 24, 20, 0.12), 0 2px 6px rgba(26, 24, 20, 0.06);

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================
   Base reset + typography
   ============================================ */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-x: hidden;            /* never scroll sideways */
  -webkit-text-size-adjust: 100%;
}

/* Faster taps + intentional tap highlight on mobile */
button, a, [role="button"], .nav-item, .filter-chip, .tpage-card, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(184, 145, 90, 0.18);
}

body {
  min-height: 100vh;
}

::selection {
  background: var(--gold-soft);
  color: var(--ink);
}

/* Force <em> tags to render upright — used semantically for gold accents */
em, i, cite, address, var, dfn {
  font-style: normal;
}

/* Subtle paper grain on body bg */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184, 145, 90, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(184, 145, 90, 0.025) 0%, transparent 50%);
}

/* Type utilities */
.display    { font-family: var(--font-display); letter-spacing: -0.02em; }
.mono       { font-family: var(--font-mono); font-feature-settings: "tnum" on; letter-spacing: -0.01em; }
.eyebrow    { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.eyebrow-num{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-quiet); letter-spacing: 0.04em; font-weight: 500; }
.label      { font-size: var(--text-xs); color: var(--ink-mute); letter-spacing: 0.01em; }