@import url('./tokens.css');

/* dentaltourismreview.com — silvery, polished, editorial */

:root {
  /* Destination accents — refined */
  --terracotta:    #C25E3A;
  --terracotta-soft:#F1DFD3;
  --agave:         #5C7A4F;
  --agave-soft:    #DDE5D5;
  --papel-pink:    #C44569;
  --papel-soft:    #F5DCE2;
  --sand:          #D9C9A6;
  --sand-soft:     #ECE3CB;
  --ocean:         #2E6F8E;
  --ocean-soft:    #D2E2EA;

  /* Silvery palette */
  --silver-50:     #FAFAFB;
  --silver-100:    #F2F3F5;
  --silver-200:    #E6E8EC;
  --silver-300:    #D2D6DC;
  --silver-400:    #B6BBC4;
  --silver-500:    #8C939E;
  --silver-600:    #5E6470;

  /* Base override toward warmer paper + silvery accents */
  --bg-app:        #F7F5EE;
  --paper-sheen:   linear-gradient(180deg, #FBFAF5 0%, #F4F1E8 100%);
  --silver-sheen:  linear-gradient(180deg, #FAFAFB 0%, #ECEEF1 50%, #DCDFE4 100%);
  --silver-sheen-dark: linear-gradient(180deg, #2A2D33 0%, #1A1C20 100%);
  --metal-rim:     linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0) 40%, rgba(0,0,0,0.06) 100%);

  --max-w-wide:    1280px;
  --gutter-page:   40px;

  --shadow-fine:   0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(15,18,22,0.04), 0 6px 18px -8px rgba(15,18,22,0.06);
  --shadow-card:   0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(15,18,22,0.04), 0 12px 30px -12px rgba(15,18,22,0.10);
  --shadow-pop:    0 1px 0 rgba(255,255,255,0.85) inset, 0 1px 3px rgba(15,18,22,0.05), 0 24px 50px -16px rgba(15,18,22,0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-app);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(194,94,58,0.06), transparent 60%),
    radial-gradient(900px 500px at -5% 30%, rgba(46,111,142,0.05), transparent 60%);
}

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--terracotta); color: var(--ivory); }

/* Signature mark */
.dtr-mark {
  font-family: var(--font-mono);
  font-size: 0.45em;
  vertical-align: super;
  line-height: 0;
  font-weight: 600;
  margin-left: 0.06em;
  color: var(--terracotta);
}

/* Buttons — metallic / Apple-y */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-serif);
  font-size: 17px;
  text-decoration: none;
  border: 1px solid #0a0c10;
  background: linear-gradient(180deg, #2A2D33 0%, #131519 100%);
  color: var(--ivory);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 2px 4px rgba(15,18,22,0.12),
    0 12px 30px -12px rgba(15,18,22,0.35);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  cursor: pointer;
  letter-spacing: -0.005em;
}
.btn:hover {
  background: linear-gradient(180deg, #353940 0%, #1A1C20 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 4px 10px rgba(15,18,22,0.18),
    0 18px 40px -14px rgba(15,18,22,0.4);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: linear-gradient(180deg, #FFFFFF 0%, #ECEEF1 100%);
  color: var(--ink);
  border: 1px solid var(--silver-300);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(0,0,0,0.04) inset,
    0 1px 2px rgba(15,18,22,0.04),
    0 8px 18px -10px rgba(15,18,22,0.10);
}
.btn-ghost:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #DEE1E6 100%);
}
.btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 999px; }
.btn-accent {
  background: linear-gradient(180deg, #D26B45 0%, #A6492B 100%);
  border-color: #84371F;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset,
    0 2px 4px rgba(132,55,31,0.2),
    0 12px 28px -12px rgba(132,55,31,0.4);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border: 1px solid var(--silver-300);
  color: var(--fg-2);
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F3F5 100%);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(15,18,22,0.04);
}
.tag-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 6px currentColor; }
.tag-moss { color: var(--moss); border-color: rgba(92,122,79,0.4); }
.tag-amber { color: var(--amber); border-color: rgba(184,134,40,0.4); }
.tag-rust { color: var(--rust); border-color: rgba(180,76,40,0.4); }
.tag-signal { color: var(--signal); border-color: rgba(46,111,142,0.4); }
.tag-terra { color: var(--terracotta); border-color: rgba(194,94,58,0.4); }

/* Card primitive — silvery with subtle inner highlight */
.card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F6F0 100%);
  border: 1px solid var(--silver-200);
  padding: 24px;
  border-radius: 14px;
  box-shadow: var(--shadow-fine);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 30%);
  pointer-events: none;
}
.card:hover {
  border-color: var(--silver-400);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.card-flat {
  background: transparent;
  border-color: var(--silver-200);
  box-shadow: none;
}
.card-flat::before { display: none; }

/* Numbered eyebrow */
.num-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--silver-500);
  text-transform: uppercase;
}

/* Arrow list */
.arrow-list { list-style: none; padding: 0; margin: 0; }
.arrow-list li { padding-left: 22px; text-indent: -22px; margin-bottom: 8px; line-height: 1.55; }
.arrow-list li::before { content: '→ '; font-family: var(--font-mono); color: var(--terracotta); }

/* Stars */
.stars {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--terracotta);
}

/* Ledger — the silvery dark-vs-light comparison */
.ledger {
  border: 1px solid var(--silver-300);
  background: var(--paper-sheen);
  font-family: var(--font-serif);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
}
.ledger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 22%);
  pointer-events: none;
  border-radius: inherit;
}
.ledger-col {
  padding: 32px 32px 36px;
  position: relative;
}
.ledger-col + .ledger-col { border-left: 1px solid var(--silver-200); }
.ledger-col-dark {
  background: linear-gradient(180deg, #2A2D33 0%, #131519 100%);
  color: var(--ivory);
}
.ledger-col-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 18%);
  pointer-events: none;
}
.ledger-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver-500);
  margin-bottom: 14px;
}
.ledger-col-dark .ledger-head { color: var(--silver-400); }
.ledger-place {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 26px;
}
.ledger-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed var(--silver-300);
  padding: 11px 0;
  font-size: 16px;
}
.ledger-col-dark .ledger-row { border-top-color: rgba(244,241,234,0.18); }
.ledger-row-total {
  font-size: 24px;
  border-top: 1px solid var(--ink);
  margin-top: 8px;
  padding-top: 16px;
  letter-spacing: -0.015em;
}
.ledger-col-dark .ledger-row-total { border-top-color: var(--ivory); }
.ledger-row-label { color: var(--fg-2); }
.ledger-col-dark .ledger-row-label { color: var(--silver-300); }
.ledger-row-val { font-family: var(--font-mono); }

/* Rules */
.rule { border: 0; border-top: 1px solid var(--silver-200); margin: 0; }
.rule-thin { border-top: 1px solid var(--silver-200); }

/* Page container */
.page {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--gutter-page);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Avatar — silvery */
.avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF 0%, #DCDFE4 100%);
  border: 1px solid var(--silver-300);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 3px rgba(15,18,22,0.08);
}

/* Forms — refined, silvery */
.input, .textarea, .select {
  width: 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
  border: 1px solid var(--silver-300);
  padding: 13px 16px;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  border-radius: 10px;
  outline: none;
  box-shadow: 0 1px 2px rgba(15,18,22,0.03) inset;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15,18,22,0.08), 0 1px 2px rgba(15,18,22,0.05) inset;
}
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-600);
  margin-bottom: 8px;
  display: block;
}

/* Frosted nav */
.nav-frost {
  background: rgba(247, 245, 238, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(15,18,22,0.08);
}

/* Glass surface (for hero side panels) */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 100%);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* Dark "glass" panels */
.glass-dark {
  background: linear-gradient(180deg, #2A2D33 0%, #131519 100%);
  border: 1px solid #0a0c10;
  border-radius: 16px;
  color: var(--ivory);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 60px -24px rgba(15,18,22,0.45);
  position: relative;
}
.glass-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 25%);
  pointer-events: none;
}

/* Two/three/four col */
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 64px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Subtle paper grain */
.grain { position: relative; }
.grain::after {
  content: '';
  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 type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0.05 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* Shimmer keyframe — used very sparingly on highlight chips */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background-image: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}

/* Pill — generic small rounded chip */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #FFFFFF 0%, #ECEEF1 100%);
  border: 1px solid var(--silver-300);
  color: var(--fg-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(15,18,22,0.04);
}

@media (max-width: 900px) {
  .two-col, .three-col, .four-col { grid-template-columns: 1fr; gap: 24px; }
  .ledger { grid-template-columns: 1fr; }
  .ledger-col + .ledger-col { border-left: none; border-top: 1px solid var(--silver-200); }
}