/* DutchGrip — colors & type tokens */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* CORE BRAND */
  --dg-lime: #C8FF00;        /* signature neon-lime accent */
  --dg-lime-soft: #96cc00;   /* darker lime for charts/secondary muscle */
  --dg-red: #ee2828;         /* primary muscle / "warning" */
  --dg-amber: #f5a623;       /* star rating */

  /* SURFACE — dark */
  --dg-black:  #0a0a0a;      /* nav, dark sections, footer */
  --dg-ink:    #111;         /* text on light, button bg */
  --dg-coal:   #1a1a1a;      /* dark card background, hero tag */
  --dg-coal-2: #2a2a2a;      /* dark card border */

  /* SURFACE — light */
  --dg-paper:  #ffffff;      /* body */
  --dg-stone:  #f8f8f8;      /* light card / price box bg */
  --dg-line:   #eee;         /* light borders */
  --dg-line-2: #f0f0f0;      /* very light divider */

  /* TEXT — light surfaces */
  --dg-fg-1:   #111;         /* body */
  --dg-fg-2:   #555;         /* secondary */
  --dg-fg-3:   #666;         /* tertiary / "Pro tip" body on dark */
  --dg-fg-4:   #888;         /* labels, inactive */
  --dg-fg-5:   #999;         /* muted */
  --dg-fg-6:   #aaa;         /* very muted (review meta) */
  --dg-fg-7:   #ccc;         /* strikethrough price */

  /* TEXT — dark surfaces */
  --dg-on-dark-1: #ffffff;
  --dg-on-dark-2: #ccc;
  --dg-on-dark-3: #666;
  --dg-on-dark-4: #555;
  --dg-on-dark-5: #444;

  /* SEMANTIC */
  --dg-save-bg: #f0ffe0;
  --dg-save-fg: #386000;
  --dg-save-border: #c0e080;

  /* TYPE */
  --dg-font-display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --dg-font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --dg-font-mark:    'Arial Black', 'Helvetica Neue', sans-serif; /* for DUTCH/GRIP wordmark */

  /* RADII */
  --dg-r-xs: 4px;
  --dg-r-sm: 6px;
  --dg-r-md: 8px;
  --dg-r-lg: 10px;
  --dg-r-xl: 12px;
  --dg-r-pill: 20px;
  --dg-r-full: 999px;

  /* SHADOW (light surfaces only — brand is mostly flat) */
  --dg-shadow-card: 0 2px 10px rgba(0,0,0,0.04);

  /* SPACING SCALE (multiples of 4) */
  --dg-s-1:  4px;
  --dg-s-2:  8px;
  --dg-s-3:  12px;
  --dg-s-4:  16px;
  --dg-s-5:  20px;
  --dg-s-6:  24px;
  --dg-s-8:  32px;
  --dg-s-10: 40px;
  --dg-s-12: 48px;
  --dg-s-16: 64px;

  /* MOTION */
  --dg-tx-fast: 0.2s ease;
  --dg-tx-mid:  0.3s ease;
  --dg-tx-slow: 0.6s ease;
}

/* ===== TYPOGRAPHY ===== */
.dg-display, h1.dg, .dg-h1 {
  font-family: var(--dg-font-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 3px;
  color: var(--dg-on-dark-1);
}
.dg-display-md, h2.dg, .dg-h2 {
  font-family: var(--dg-font-display);
  font-size: 32px;
  letter-spacing: 2px;
  line-height: 1;
}
.dg-display-sm, h3.dg, .dg-h3 {
  font-family: var(--dg-font-display);
  font-size: 24px;
  letter-spacing: 2px;
  line-height: 1;
}
.dg-display-xs, h4.dg, .dg-h4 {
  font-family: var(--dg-font-display);
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}
.dg-body, p.dg, .dg-p {
  font-family: var(--dg-font-body);
  font-size: 13px;
  line-height: 1.7;
  color: var(--dg-fg-3);
}
.dg-body-sm, .dg-small {
  font-family: var(--dg-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--dg-fg-3);
}
.dg-eyebrow, .dg-label {
  font-family: var(--dg-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dg-fg-4);
}
.dg-meta {
  font-family: var(--dg-font-body);
  font-size: 11px;
  color: var(--dg-fg-6);
}
.dg-num {
  font-family: var(--dg-font-display);
  letter-spacing: 0;
}