/* Direction: Strata — a dark drawing studio, charcoal panels, a hot coral accent */
/* 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 {
  color-scheme: dark;
  --canvas: #17161b;
  --surface: #201e26;
  --surface-2: #121116;
  --border: #38343f;
  --border-strong: #5d5c5f;
  --ink: #ece9f1;
  --muted: #a8a3b5;
  --accent: #e8553a;
  --accent-hover: #eb6f58;
  --accent-ink: #200c08;
  --accent-text: #ff8f72;
  --accent-strong: #ec6f58;
  --accent-soft: #452422;
  --accent-border: #753229;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172d22;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2317;
  --warning-strong: #ca854f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b171b;
  --danger-strong: #d57575;
  --chart-1: #e8553a;
  --chart-2: #c9a515;
  --chart-3: #1e9853;
  --chart-4: #09b6cf;
  --chart-5: #5d71ee;
  --chart-6: #e772d8;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 12px;
  --radius-btn: 9px;
  --x-paper: #ffffff;
  --x-s1: #1b1a1f;
  --x-s2: #f4f1ea;
  --x-s3: #e8553a;
  --x-s4: #f29b38;
  --x-s5: #f5d547;
  --x-s6: #6fbf73;
  --x-s7: #2f8f83;
  --x-s8: #4aa3df;
  --x-s9: #3b3f9e;
  --x-s10: #8e5bd6;
  --x-s11: #e2639a;
  --x-s12: #8a5a3c;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f3f3;
  --border: #e0dddc;
  --border-strong: #bcb6b5;
  --ink: #17161b;
  --muted: #6b6a6d;
  --accent: #e8553a;
  --accent-hover: #c54831;
  --accent-ink: #200c08;
  --accent-text: #b4422d;
  --accent-strong: #b4422d;
  --accent-soft: #fce7e3;
  --accent-border: #f5b3a6;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #e8553a;
  --chart-2: #af8f04;
  --chart-3: #018c48;
  --chart-4: #229cb1;
  --chart-5: #5162dd;
  --chart-6: #d965ca;
}

.tool {
  @apply flex flex-col items-center gap-1 rounded-lg border border-border bg-canvas px-1 py-2 text-[11px] text-muted transition;
  cursor: pointer;
}
.tool:hover {
  @apply text-ink;
  border-color: var(--accent);
}
.tool:active {
  transform: scale(0.96);
}
.tool:focus-visible,
.layer:focus-visible,
.swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tool[aria-pressed="true"] {
  @apply bg-accent-soft text-accent-strong;
  border-color: var(--accent);
}

.swatch {
  @apply h-7 rounded-md border border-border;
  cursor: pointer;
  transition: transform 0.12s;
}
.swatch:hover {
  transform: translateY(-2px);
}
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
}

.layer {
  @apply flex items-center gap-2 rounded-lg border border-border bg-canvas p-1.5;
  cursor: pointer;
}
.layer:hover {
  border-color: var(--accent);
}
.layer[aria-current="true"] {
  @apply bg-accent-soft;
  border-color: var(--accent);
}

.vp-bg {
  @apply bg-surface-2;
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
}

#stage {
  position: relative;
  flex: none;
  margin: auto;
  isolation: isolate;
  background: var(--x-paper);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  touch-action: none;
  cursor: crosshair;
}
#viewport.panning #stage {
  cursor: grab;
}

input[type="range"] {
  accent-color: var(--accent);
}