/* Nardi — Design tokens
   Premium mobile board game. Obsidian + walnut + ivory + muted brass.
   Not casino, not SaaS, not generic. */

:root {
  /* Surfaces */
  --obsidian:        #0b0d10;
  --graphite:        #14171c;
  --charcoal:        #1b1f25;
  --slate:           #252b33;
  --hairline:        rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.12);

  /* Wood / leather (board) */
  --walnut-dark:     #2a1a12;
  --walnut:          #3d2718;
  --walnut-light:    #5a3a24;
  --smoked-oak:      #4a3324;
  --leather-deep:    #3a2416;
  --felt-deep:       #1a2820;
  --felt:            #22342a;

  /* Points */
  --point-ivory:     #c9b394;
  --point-ivory-2:   #a08b6e;
  --point-onyx:      #2e241c;
  --point-onyx-2:    #1c1510;
  --point-divider:   rgba(0,0,0,0.35);

  /* Checkers */
  --checker-ivory:   #e8dcc4;
  --checker-ivory-hi:#fff3dc;
  --checker-ivory-lo:#a48f6e;
  --checker-onyx:    #1b1714;
  --checker-onyx-hi: #3c342d;
  --checker-onyx-lo: #000000;

  /* Brand / accents */
  --brass:           #c9a35c;
  --brass-hi:        #e6c07a;
  --brass-lo:        #8a6d35;
  --emerald:         #4ea87a;
  --ruby:            #c96a5a;
  --coin:            #d8b25a;

  /* Text */
  --text-primary:    #ece6d8;
  --text-secondary:  #a8a096;
  --text-muted:      #6d6860;
  --text-on-brass:   #17120a;

  /* Status */
  --win:             #62b488;
  --loss:            #c96a5a;
  --warn:            #d7a75a;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadows */
  --shadow-raise: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -12px rgba(0,0,0,0.65);
  --shadow-card:  0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px -18px rgba(0,0,0,0.7);
  --shadow-deep:  0 20px 60px -30px rgba(0,0,0,0.9);

  /* Spacing scale (4pt) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* Type */
  --ff-sans: 'Geist', 'SF Pro Text', system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif;
  --ff-display: 'Instrument Serif', 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --ff-numeric: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);

  /* Mobile chrome */
  --bottom-nav-height: 92px;
  --cta-dock-height: 108px;

  /* Safe area */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bot: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--obsidian);
  color: var(--text-primary);
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "cv02";
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  color: inherit;
}

/* Typography classes */
.t-display {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.t-display-lg {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.t-h1 { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.t-h2 { font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.t-h3 { font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.t-body { font-size: 14.5px; line-height: 1.5; color: var(--text-primary); letter-spacing: -0.003em; }
.t-body-sm { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.t-caption { font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); }
.t-label { font-size: 10.5px; line-height: 1.3; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }
.t-serif { font-family: var(--ff-display); font-style: italic; font-weight: 400; }
.t-numeric { font-family: var(--ff-numeric); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }

/* App shell */
.app-frame {
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--obsidian);
  background-image:
    radial-gradient(1200px 500px at 50% -200px, rgba(201, 163, 92, 0.05), transparent 70%),
    radial-gradient(900px 400px at 100% 100%, rgba(30, 60, 50, 0.12), transparent 60%);
  overflow: hidden;
}

.page {
  padding-top: calc(var(--sa-top) + 8px);
  padding-bottom: calc(var(--sa-bot) + var(--bottom-nav-height) + var(--page-bottom-extra, 0px));
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.fixed-mobile-shell {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 440px);
  max-width: 100vw;
  z-index: 120;
  pointer-events: none;
}

.fixed-mobile-shell > * {
  pointer-events: auto;
}

.fixed-mobile-shell--nav {
  bottom: 0;
}

.fixed-mobile-shell--cta {
  bottom: 0;
  z-index: 140;
}

/* Subtle paper/noise texture used on felt/wood */
.noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.45'/></svg>");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.25;
  pointer-events: none;
}

/* scrollbars */
::-webkit-scrollbar { width: 0; height: 0; }