/* Direction: developer marketplace — near-black canvas, indigo accent, mono for code */
/* 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: #0b0d14;
  --surface: #12151f;
  --surface-2: #171b28;
  --border: #23283a;
  --border-strong: #54565b;
  --ink: #e8eaf2;
  --muted: #8a8fa3;
  --accent: #6366f1;
  --accent-hover: #7a7df3;
  --accent-ink: #ffffff;
  --accent-text: #a5b4fc;
  --accent-strong: #818cf8;
  --accent-soft: #1e1f3a;
  --accent-border: #333577;
  --success: #34d399;
  --success-ink: #ffffff;
  --success-soft: #143931;
  --success-strong: #34d399;
  --warning: #fbbf24;
  --warning-ink: #ffffff;
  --warning-soft: #403418;
  --warning-strong: #fbbf24;
  --danger: #fb7185;
  --danger-ink: #ffffff;
  --danger-soft: #40232d;
  --danger-strong: #fb7185;
  --chart-1: #6366f1;
  --chart-2: #e15ac3;
  --chart-3: #d84918;
  --chart-4: #a89003;
  --chart-5: #1c975f;
  --chart-6: #1ca4c1;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 8px;
  --shadow-card: 0 20px 60px -20px rgba(99, 102, 241, 0.35);
  --x-code-bg: #0a0c12;
  --x-on-photo: #ffffff;
  --gradient-hero: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  --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: #f3f3f3;
  --border: #ddddde;
  --border-strong: #b6b6b9;
  --ink: #0b0d14;
  --muted: #6d6e72;
  --accent: #6366f1;
  --accent-hover: #5457cd;
  --accent-ink: #ffffff;
  --accent-text: #5b5ede;
  --accent-strong: #5456cc;
  --accent-soft: #e9eafd;
  --accent-border: #b9baf9;
  --success: #34d399;
  --success-ink: #0b0d14;
  --success-soft: #e7faf3;
  --success-strong: #1d7656;
  --warning: #fbbf24;
  --warning-ink: #0b0d14;
  --warning-soft: #fff7e5;
  --warning-strong: #8d6b14;
  --danger: #fb7185;
  --danger-ink: #0b0d14;
  --danger-soft: #ffeef0;
  --danger-strong: #a64b57;
  --chart-1: #6366f1;
  --chart-2: #e15ac3;
  --chart-3: #ac3810;
  --chart-4: #a89003;
  --chart-5: #0c7547;
  --chart-6: #0b9ebb;
}

/* Small textures for the component marketplace */

.code-block {
  @apply rounded-xl border border-border p-4 text-xs leading-relaxed text-ink overflow-x-auto;
  background: var(--x-code-bg);
  font-family: var(--font-mono);
}

.grid-fade {
  background-image:
    linear-gradient(to bottom, transparent, var(--canvas) 85%),
    linear-gradient(to right, rgba(99, 102, 241, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.12) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
}

.preview-surface {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
  background-size: 16px 16px;
}

/* Live component-preview interactions (scoped to [data-demo] blocks) */
@keyframes demo-pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--accent-border); opacity: 1; }
  100% { box-shadow: 0 0 0 14px transparent; opacity: 0; }
}
[data-demo-pulse-ring].is-pulsing {
  animation: demo-pulse-ring 0.6s ease-out;
}

@keyframes demo-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
[data-demo-toast-stack] > * {
  animation: demo-toast-in 0.25s ease-out;
}

html.reduced-motion [data-demo-pulse-ring].is-pulsing,
html.reduced-motion [data-demo-toast-stack] > * {
  animation: none;
}