/* Creative Yadley Design System 2.3.0 — shared primitives */
:root {
  color-scheme: dark;
  --cy-brand-obsidian: #08090B;
  --cy-brand-surface-1: #111317;
  --cy-brand-surface-2: #16191F;
  --cy-brand-surface-3: #1E222A;
  --cy-brand-rail-dark: #0D0F14;
  --cy-brand-canvas-warm: #F4F5F2;
  --cy-brand-slate: #5E6463;
  --cy-brand-silver: #C4C6C1;
  --cy-brand-lime: #AFE139;
  --cy-brand-white: #FFFFFF;

  --cy-font-display: "Plus Jakarta Sans", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cy-font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cy-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --cy-weight-regular: 400;
  --cy-weight-medium: 500;
  --cy-weight-semibold: 600;
  --cy-weight-bold: 700;

  --cy-text-micro: 0.75rem;
  --cy-text-caption: 0.875rem;
  --cy-text-compact: 1rem;
  --cy-text-body: 1.125rem;
  --cy-text-intro: 1.3125rem;
  --cy-heading-4: 1.125rem;
  --cy-heading-3: 1.375rem;
  --cy-heading-2: clamp(1.75rem, 3vw, 2rem);
  --cy-heading-1: clamp(2.5rem, 4vw, 3rem);
  --cy-display-l: clamp(3rem, 6vw, 4rem);
  --cy-display-xl: clamp(4rem, 8vw, 6rem);

  --cy-rail-width: 256px;

  --cy-space-1: 4px; --cy-space-2: 8px; --cy-space-3: 12px;
  --cy-space-4: 16px; --cy-space-5: 20px; --cy-space-6: 24px;
  --cy-space-8: 32px; --cy-space-10: 40px; --cy-space-12: 48px;
  --cy-space-16: 64px; --cy-space-20: 80px; --cy-space-24: 96px;

  --cy-radius-sm: 8px; --cy-radius-md: 12px; --cy-radius-lg: 16px;
  --cy-radius-xl: 24px; --cy-radius-pill: 999px;

  --cy-border-width: 1px;
  --cy-border-width-emphasis: 2px;
  --cy-focus-width: 3px;
  --cy-focus-offset: 3px;

  --cy-duration-fast: 140ms; --cy-duration-normal: 220ms; --cy-duration-slow: 360ms;
  --cy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cy-content-max: 1200px;
}

* { box-sizing: border-box; }
html { font-family: var(--cy-font-sans); text-rendering: optimizeLegibility; }
body {
  margin: 0; background: var(--cy-bg); color: var(--cy-text);
  font: var(--cy-weight-regular) var(--cy-text-body)/1.55 var(--cy-font-sans);
}
p { margin: 0 0 1em; }
.cy-intro {
  font: 400 var(--cy-text-intro)/1.381 var(--cy-font-sans);
  letter-spacing: 0.011em;
}
:where(h1,h2,h3,h4,.cy-display) {
  font-family: var(--cy-font-display); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance;
}
:where(button,input,select,textarea) { font: inherit; }
:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: var(--cy-focus-width) solid var(--cy-focus);
  outline-offset: var(--cy-focus-offset);
}
.cy-container { width: min(100% - 2rem, var(--cy-content-max)); margin-inline: auto; }
.cy-card {
  color: var(--cy-text); background: var(--cy-surface-1);
  border: var(--cy-border-width) solid var(--cy-border);
  border-radius: var(--cy-radius-lg); box-shadow: var(--cy-shadow-1);
}
.cy-divider { height: 1px; border: 0; background: var(--cy-border); }
.cy-divider--strong { height: 2px; background: var(--cy-border-strong); }
.cy-button {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
  gap: 8px; padding: 0 24px; border: 1px solid transparent;
  border-radius: var(--cy-radius-pill); font-size: 16px; font-weight: 600;
  line-height: 1; cursor: pointer;
  transition: background-color 220ms var(--cy-ease-out), color 220ms var(--cy-ease-out),
    border-color 220ms var(--cy-ease-out), transform 140ms var(--cy-ease-out), box-shadow 220ms var(--cy-ease-out);
}
.cy-button:active { transform: translateY(1px); }
.cy-button:disabled { cursor: not-allowed; opacity: .55; }
.cy-button--primary {
  color: var(--cy-action-text); background: var(--cy-action); border-color: var(--cy-action);
  box-shadow: 0 0 16px var(--cy-action-glow);
}
.cy-button--primary:hover:not(:disabled) {
  background: var(--cy-action-hover); border-color: var(--cy-action-hover);
  box-shadow: 0 0 24px var(--cy-action-glow);
}
.cy-button--secondary { color: var(--cy-text); background: var(--cy-surface-2); border-color: var(--cy-border-strong); }
.cy-button--secondary:hover:not(:disabled) { background: var(--cy-surface-hover); }
.cy-input {
  width: 100%; min-height: 52px; padding: 12px 24px; color: var(--cy-text);
  background: var(--cy-field); border: 1px solid var(--cy-border-strong);
  border-radius: var(--cy-radius-pill); font-size: 16px;
}
.cy-input::placeholder { color: var(--cy-text-muted); }
.cy-input[aria-invalid="true"] { border: 2px solid var(--cy-danger); }
.cy-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid transparent; }
.cy-badge--success { color: var(--cy-success-text); background: var(--cy-success-bg); border-color: var(--cy-success-border); }
.cy-badge--info { color: var(--cy-info-text); background: var(--cy-info-bg); border-color: var(--cy-info-border); }
.cy-badge--warning { color: var(--cy-warning-text); background: var(--cy-warning-bg); border-color: var(--cy-warning-border); }
.cy-badge--danger { color: var(--cy-danger-text); background: var(--cy-danger-bg); border-color: var(--cy-danger-border); }
.cy-badge--in-progress { color: var(--cy-in-progress-text); background: var(--cy-in-progress-bg); border-color: var(--cy-in-progress-border); }
.cy-badge--neutral { color: var(--cy-neutral-text); background: var(--cy-neutral-bg); border-color: var(--cy-neutral-border); }

/* Selective Low-Contrast Micro-Grid */
.cy-bg-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}