/* =================================================================
   DEVOTION MARKETING — Site Styles
   Dark grey · White · Bone beige · Nike-bold attitude
   ================================================================= */

:root {
  /* SURFACES — dark mode default */
  --dm-bg:        #0d0d0d;
  --dm-surface:   #141414;
  --dm-surface-2: #1c1c1c;
  --dm-surface-3: #242424;
  --dm-border:    #262626;
  --dm-border-2:  #1a1a1a;

  /* INK */
  --dm-ink:       #ffffff;
  --dm-ink-soft:  #d4d4d2;
  --dm-muted:     #8a8a87;
  --dm-muted-2:   #5a5a57;

  /* BONE — the only "color" */
  --dm-bone:        #FFF6E1;
  --dm-bone-soft:   #F1E9CC;
  --dm-bone-dim-08: rgba(255,246,225,0.08);
  --dm-bone-dim-12: rgba(255,246,225,0.12);
  --dm-bone-dim-20: rgba(255,246,225,0.20);
  --dm-bone-dim-65: rgba(255,246,225,0.65);

  /* Accent text — readable on whichever bg is active */
  --dm-accent: var(--dm-bone);

  /* Status (kept minimal, used sparingly) */
  --dm-green: #4ade80;
  --dm-red:   #f87171;

  /* TYPE — declared but swapped via Tweaks */
  --dm-font-display: 'Anton', 'Archivo Black', system-ui, sans-serif;
  --dm-font-subhead: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --dm-font-body:    'Manrope', 'Geist', system-ui, sans-serif;
  --dm-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* SCALE — editorial, much bigger than dashboard */
  --dm-fs-mega:    clamp(80px, 14vw, 220px);
  --dm-fs-hero:    clamp(56px, 10vw, 156px);
  --dm-fs-display: clamp(40px, 7vw, 96px);
  --dm-fs-h1:      clamp(32px, 5vw, 64px);
  --dm-fs-h2:      clamp(24px, 3vw, 40px);
  --dm-fs-h3:      20px;
  --dm-fs-body:    16px;
  --dm-fs-sm:      14px;
  --dm-fs-eyebrow: 11px;
  --dm-fs-micro:   10px;

  --dm-tracking-eyebrow: 0.18em;
  --dm-tracking-display: -0.02em;
  --dm-tracking-mega:    -0.04em;

  /* RADII (Nike uses mostly 0/squares but allows pills) */
  --dm-r-0:   0;
  --dm-r-xs:  2px;
  --dm-r-sm:  4px;
  --dm-r-md:  8px;
  --dm-r-pill: 9999px;

  /* MOTION */
  --dm-t-fast: 0.16s;
  --dm-t-med:  0.28s;
  --dm-t-slow: 0.6s;
  --dm-ease:   cubic-bezier(0.2, 0.7, 0.2, 1);

  /* LAYOUT */
  --dm-page-pad-x: clamp(20px, 4vw, 56px);
  --dm-nav-h: 64px;
}

/* LIGHT MODE */
[data-theme="light"] {
  --dm-bg:        #f5f4ef;
  --dm-surface:   #fbfaf5;
  --dm-surface-2: #ecebe4;
  --dm-surface-3: #e2e0d6;
  --dm-border:    #d4d2c4;
  --dm-border-2:  #e5e3d6;
  --dm-ink:       #111111;
  --dm-ink-soft:  #2a2a2a;
  --dm-muted:     #6a6a65;
  --dm-muted-2:   #999895;
  --dm-bone:        #FFF6E1;
  --dm-bone-soft:   #2a2a28;
  --dm-bone-dim-08: rgba(20,20,20,0.05);
  --dm-bone-dim-12: rgba(20,20,20,0.08);
  --dm-bone-dim-20: rgba(20,20,20,0.12);
  --dm-bone-dim-65: rgba(20,20,20,0.5);
  /* Deep brown accent for readable highlight text on light surfaces */
  --dm-accent: #5a3a1c;
}

/* RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--dm-bg);
  color: var(--dm-ink);
  font-family: var(--dm-font-body);
  font-size: var(--dm-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* TYPE PRIMITIVES */
.dm-mega {
  font-family: var(--dm-font-display);
  font-size: var(--dm-fs-mega);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: var(--dm-tracking-mega);
  text-transform: uppercase;
}
.dm-hero {
  font-family: var(--dm-font-display);
  font-size: var(--dm-fs-hero);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: var(--dm-tracking-display);
  text-transform: uppercase;
}
.dm-display {
  font-family: var(--dm-font-display);
  font-size: var(--dm-fs-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: var(--dm-tracking-display);
  text-transform: uppercase;
}
.dm-h1 {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-h1);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.dm-h2 {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.dm-h3 {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dm-body { font-family: var(--dm-font-body); font-size: var(--dm-fs-body); line-height: 1.6; }
.dm-body-lg { font-family: var(--dm-font-body); font-size: 18px; line-height: 1.55; }
.dm-body-sm { font-family: var(--dm-font-body); font-size: var(--dm-fs-sm); line-height: 1.55; color: var(--dm-muted); }
.dm-eyebrow {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--dm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dm-muted);
}
.dm-micro {
  font-family: var(--dm-font-subhead);
  font-size: var(--dm-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dm-muted);
}
.dm-bone-tint { color: var(--dm-bone); }

/* BUTTONS — Nike: hard pills, all-caps */
.dm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--dm-r-pill);
  font-family: var(--dm-font-subhead);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all var(--dm-t-fast) var(--dm-ease);
  white-space: nowrap;
  border: 1px solid transparent;
  user-select: none;
}
.dm-btn-primary {
  background: var(--dm-ink);
  color: var(--dm-bg);
}
.dm-btn-primary:hover { transform: translateY(-1px); opacity: 0.9; }
.dm-btn-bone {
  background: var(--dm-bone);
  color: #1a1a1a;
}
.dm-btn-bone:hover { transform: translateY(-1px); background: var(--dm-bone-soft); }
.dm-btn-ghost {
  background: transparent;
  border-color: var(--dm-border);
  color: var(--dm-ink);
}
.dm-btn-ghost:hover { border-color: var(--dm-ink); background: var(--dm-bone-dim-08); }
.dm-btn-lg { padding: 18px 30px; font-size: 15px; }
.dm-btn .arrow { display: inline-block; transition: transform var(--dm-t-fast) var(--dm-ease); }
.dm-btn:hover .arrow { transform: translateX(4px); }

/* PAGE PADDING */
.dm-pad { padding-left: var(--dm-page-pad-x); padding-right: var(--dm-page-pad-x); }
.dm-section { padding-top: clamp(60px, 9vw, 140px); padding-bottom: clamp(60px, 9vw, 140px); }

/* PLACEHOLDER IMAGERY — bone-tinted gradient with dotted frame */
.dm-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--dm-surface-2) 0%, var(--dm-surface) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dm-muted);
}
.dm-placeholder .ph-lbl {
  font-family: var(--dm-font-subhead);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dm-muted-2);
  text-align: center;
  padding: 8px 14px;
  position: relative;
  z-index: 1;
}

/* Animated placeholder for cinematic hero */
.dm-placeholder.cinematic {
  background:
    radial-gradient(1200px 600px at 70% 30%, var(--dm-bone-dim-08), transparent 60%),
    radial-gradient(900px 500px at 20% 70%, rgba(255,246,225,0.04), transparent 60%),
    linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}
.dm-placeholder.cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  pointer-events: none;
}
[data-theme="light"] .dm-placeholder.cinematic {
  background:
    radial-gradient(1200px 600px at 70% 30%, rgba(20,20,20,0.06), transparent 60%),
    radial-gradient(900px 500px at 20% 70%, rgba(20,20,20,0.04), transparent 60%),
    linear-gradient(135deg, #e8e6db 0%, #d6d4c4 100%);
}

/* Drift animation for hero placeholder */
.dm-drift {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at var(--x, 50%) var(--y, 50%), var(--dm-bone-dim-12), transparent 60%);
  animation: dm-drift 12s ease-in-out infinite alternate;
}
@keyframes dm-drift {
  0%   { --x: 30%; --y: 40%; transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { --x: 70%; --y: 65%; transform: scale(1); }
}

/* MARQUEE */
.dm-marquee {
  display: flex;
  overflow: hidden;
  border-top: 1px solid var(--dm-border);
  border-bottom: 1px solid var(--dm-border);
  background: var(--dm-bg);
}
.dm-marquee-track {
  display: flex;
  gap: 60px;
  padding: 22px 30px;
  flex-shrink: 0;
  animation: dm-scroll 40s linear infinite;
  white-space: nowrap;
}
@keyframes dm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.dm-marquee:hover .dm-marquee-track { animation-play-state: paused; }
.dm-marquee-item {
  font-family: var(--dm-font-display);
  font-size: clamp(36px, 5vw, 64px);
  text-transform: uppercase;
  color: var(--dm-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.dm-marquee-item.bone { color: var(--dm-bone); }
.dm-marquee-item.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dm-ink);
}
.dm-marquee-star {
  font-family: var(--dm-font-display);
  font-size: clamp(36px, 5vw, 64px);
  color: var(--dm-bone);
  display: inline-flex;
  align-items: center;
}

/* DIVIDERS */
.dm-rule { height: 1px; background: var(--dm-border); width: 100%; }

/* FORMS */
.dm-input,
.dm-textarea,
.dm-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dm-border);
  color: var(--dm-ink);
  padding: 16px 0;
  font-family: var(--dm-font-body);
  font-size: 16px;
  outline: none;
  transition: border-color var(--dm-t-fast) var(--dm-ease);
}
.dm-input:focus,
.dm-textarea:focus,
.dm-select:focus { border-bottom-color: var(--dm-ink); }
.dm-input::placeholder,
.dm-textarea::placeholder { color: var(--dm-muted-2); }
.dm-field-label {
  font-family: var(--dm-font-subhead);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--dm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dm-muted);
  display: block;
  margin-bottom: 4px;
}

/* PAGE TRANSITION */
.dm-page-enter { animation: dm-fade-in 0.4s var(--dm-ease) both; }
@keyframes dm-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* COMPARISON ROW DETAIL REVEAL */
.dm-row-detail { animation: dm-row-reveal 0.32s var(--dm-ease) both; }
@keyframes dm-row-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SELECTION */
::selection { background: var(--dm-bone); color: #0a0a0a; }

/* SCROLLBAR */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--dm-bg); }
::-webkit-scrollbar-thumb { background: var(--dm-surface-2); border-radius: 6px; border: 3px solid var(--dm-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--dm-surface-3); }