/*
 * GEN7 RACING — design system tokens for WordPress / Theme.co Pro.
 * Mirrors src/styles.css in the Lovable design reference app.
 * Dark is the default; `html.gen7-light` switches to the paper theme.
 */

:root {
  --gen7-radius: 2px;

  /* Core surfaces */
  --gen7-ink: #0f0d0c;
  --gen7-charcoal: #262322;
  --gen7-steel: #898581;
  --gen7-paper: #f4f1ec;

  /* Dark theme (default) */
  --gen7-bg: #0f0d0c;
  --gen7-fg: #eeebe5;
  --gen7-card: #1a1816;
  --gen7-muted: #262322;
  --gen7-muted-fg: #9b9893;
  --gen7-primary: #d35d31;
  --gen7-primary-fg: #120f0e;
  --gen7-border: rgba(255, 255, 255, 0.12);

  /* Type */
  --gen7-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --gen7-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --gen7-font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

html.gen7-light {
  --gen7-bg: #f4f1ec;
  --gen7-fg: #0f0d0c;
  --gen7-card: #faf8f4;
  --gen7-muted: #e7e4df;
  --gen7-muted-fg: #605d5a;
  --gen7-primary: #b13c11;
  --gen7-primary-fg: #f7f5f1;
  --gen7-border: #d4d0cb;
}

/* ---------------------------------------------------------------- base */

body {
  background-color: var(--gen7-bg);
  color: var(--gen7-fg);
  font-family: var(--gen7-font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.x-text-headline,
.x-text-content-text-primary {
  font-family: var(--gen7-font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.005em;
  color: var(--gen7-fg);
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 0.94; }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1; }
h3 { font-size: clamp(1.375rem, 2.5vw, 1.875rem); line-height: 1.08; }
h4 { font-size: 1.125rem; line-height: 1.2; }

a { color: inherit; }
a:hover { color: var(--gen7-primary); }

::selection {
  background: var(--gen7-primary);
  color: var(--gen7-primary-fg);
}

/* ------------------------------------------------------------ utilities
 * Add these class names to any Theme.co Pro / Cornerstone element.
 */

.gen7-kicker {
  font-family: var(--gen7-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gen7-muted-fg);
  font-style: normal;
}

.gen7-spec {
  font-family: var(--gen7-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.gen7-rule {
  border: 0;
  border-top: 1px solid var(--gen7-border);
  margin: 0;
}

.gen7-accent { color: var(--gen7-primary); }
.gen7-bg-card { background-color: var(--gen7-card); }
.gen7-bg-ink { background-color: var(--gen7-ink); color: var(--gen7-paper); }

.gen7-lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--gen7-muted-fg);
  max-width: 62ch;
}

.gen7-prose p { line-height: 1.7; margin-bottom: 1.15em; max-width: 68ch; }
.gen7-prose p:first-of-type::first-letter {
  font-family: var(--gen7-font-display);
  font-style: italic;
  font-weight: 700;
  float: left;
  font-size: 3.6em;
  line-height: 0.78;
  padding-right: 0.08em;
  color: var(--gen7-primary);
}

.gen7-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--gen7-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--gen7-fg);
  border-radius: var(--gen7-radius);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gen7-btn:hover {
  background: var(--gen7-primary);
  border-color: var(--gen7-primary);
  color: var(--gen7-primary-fg);
}
.gen7-btn--solid {
  background: var(--gen7-primary);
  border-color: var(--gen7-primary);
  color: var(--gen7-primary-fg);
}

.gen7-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--gen7-font-mono);
  font-size: 0.8125rem;
}
.gen7-specs-table th,
.gen7-specs-table td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--gen7-border);
}
.gen7-specs-table th {
  color: var(--gen7-muted-fg);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.6875rem;
  width: 40%;
}

.gen7-timeline { list-style: none; margin: 0; padding: 0; }
.gen7-timeline li {
  position: relative;
  padding: 0 0 1.75rem 1.75rem;
  border-left: 1px solid var(--gen7-border);
}
.gen7-timeline li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.4rem;
  width: 7px;
  height: 7px;
  background: var(--gen7-primary);
  border-radius: 50%;
}
.gen7-timeline time {
  display: block;
  font-family: var(--gen7-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gen7-muted-fg);
  margin-bottom: 0.3rem;
}

.gen7-theme-toggle {
  background: none;
  border: 1px solid var(--gen7-border);
  border-radius: var(--gen7-radius);
  color: inherit;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  line-height: 1;
}
.gen7-theme-toggle:hover { border-color: var(--gen7-primary); color: var(--gen7-primary); }
html:not(.gen7-light) .gen7-theme-toggle .gen7-icon-moon { display: none; }
html.gen7-light .gen7-theme-toggle .gen7-icon-sun { display: none; }

/* Restrained entrance motion */
.gen7-rise {
  animation: gen7-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gen7-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gen7-rise { animation: none; }
}