/* Direction: Rowan Vale — bone paper, graphite ink, a hot vermilion signal, Space Grotesk display, JetBrains Mono labels */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #efece4;
  --surface: #faf8f3;
  --surface-2: #e4e0d5;
  --border: #d3cec0;
  --border-strong: #b0a7a1;
  --ink: #141413;
  --muted: #5f5b52;
  --accent: #d4351a;
  --accent-hover: #b42d16;
  --accent-ink: #ffffff;
  --accent-text: #b12811;
  --accent-strong: #b32d16;
  --accent-soft: #f7ddd5;
  --accent-border: #e39a89;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d5dfd0;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #e8daca;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #e9d3cc;
  --danger-strong: #b91c1c;
  --chart-1: #d4351a;
  --chart-2: #a18418;
  --chart-3: #15743d;
  --chart-4: #1090a4;
  --chart-5: #3d4acc;
  --chart-6: #cb51be;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --radius-btn: 999px;
  --radius-input: 12px;
  --radius-card: 20px;
  --shadow-card: 0 1px 2px rgb(20 20 19 / 0.05), 0 24px 48px -32px rgb(20 20 19 / 0.4);
  --x-band: #121211;
  --x-on-photo: #ffffff;
  --x-band-muted: rgb(255 255 255 / 0.68);
  --x-band-line: rgb(255 255 255 / 0.16);
  --x-code-str: #b4540a;
  --x-code-num: #0b6aa0;
  --x-code-fn: #7a3be0;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #100303;
  --surface: #281c1c;
  --surface-2: #1c1010;
  --border: #312626;
  --border-strong: #584f4f;
  --ink: #efece4;
  --muted: #968f8a;
  --accent: #d4351a;
  --accent-hover: #da533c;
  --accent-ink: #ffffff;
  --accent-text: #dd624d;
  --accent-strong: #dd624d;
  --accent-soft: #3b0e08;
  --accent-border: #68190d;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #111f10;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #341504;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #350909;
  --danger-strong: #d16969;
  --chart-1: #d4351a;
  --chart-2: #b09013;
  --chart-3: #0a994f;
  --chart-4: #069eb4;
  --chart-5: #5a70f5;
  --chart-6: #d258c5;
}

/* app.css — the page's own layer: carousel track, hero sticker, caret, row hover. */

section[id] { scroll-margin-top: 1rem; }

@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.code-caret { animation: caret-blink 1.05s steps(1) infinite; }

/* hero: a code sticker slightly off-axis, plus a faint ruled backdrop */
.sticker { transform: rotate(-1.6deg); box-shadow: var(--shadow-card); transition: transform .35s ease; }
.sticker:hover { transform: rotate(0deg); }
.rules {
  background-image: linear-gradient(var(--border) 1px, transparent 1px);
  background-size: 100% 64px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
  mask-image: linear-gradient(#000, transparent 85%);
  opacity: .55;
}

/* testimonial carousel */
.car-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
.car-dot { height: 6px; width: 22px; border-radius: 999px; background: var(--border); transition: width .3s ease, background-color .3s ease; }
.car-dot[aria-current="true"] { width: 48px; background: var(--accent); }
.car-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 24px; }

@keyframes car-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.car-progress { transform-origin: left; animation: car-fill 7s linear forwards; }
.car-paused .car-progress { animation-play-state: paused; }

/* service rows */
.svc-row { transition: background-color .2s ease, padding .2s ease; }
.svc-row:hover { background-color: var(--surface); }

html.reduced-motion .code-caret,
html.reduced-motion .car-progress { animation: none; }
html.reduced-motion .sticker,
html.reduced-motion .car-dot { transition: none; }