/* Custom styles layered on top of Tailwind Play CDN.
 * Kept tiny on purpose - everything that fits in a Tailwind utility lives in
 * the markup. This file is for things Tailwind utilities can't easily do:
 * the indigo brand gradient, the simulated device chrome, and the screenshot
 * placeholder texture.
 */

:root {
  --kanso-paper: #FBF8F3;
  --kanso-ink: #1a1a2e;
  --kanso-ink-2: #16213e;
  --kanso-accent: #569CD6;
  --kanso-accent-dark: #2970B0;
  --kanso-muted: #6B6764;
  --kanso-rule: #E8E4DD;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--kanso-paper); color: var(--kanso-ink); }

.brand-gradient { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
.text-accent { color: var(--kanso-accent-dark); }
.text-muted { color: var(--kanso-muted); }
.border-rule { border-color: var(--kanso-rule); }

/* Paper-texture placeholder used wherever a real screenshot will eventually land.
 * Faint diagonal stripes so empty regions read as "preview pending" rather than
 * a broken layout, but not so loud they distract from the surrounding copy.
 */
.shot-placeholder {
  background-color: #F1ECE3;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(26, 26, 46, 0.04) 0,
    rgba(26, 26, 46, 0.04) 1px,
    transparent 1px,
    transparent 14px
  );
}

/* Mac window chrome used for inline mockups. Pure CSS, no images. */
.mac-window { border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(26, 26, 46, 0.25), 0 12px 24px -12px rgba(26, 26, 46, 0.15); overflow: hidden; }
.mac-titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #ECE7DE; border-bottom: 1px solid #DDD6CB; }
.mac-dot { width: 12px; height: 12px; border-radius: 50%; }

/* iPhone frame. Notch is a single pseudo-element to keep markup clean. */
.iphone-frame { border-radius: 38px; padding: 8px; background: #1a1a2e; box-shadow: 0 30px 60px -20px rgba(26, 26, 46, 0.4); position: relative; }
.iphone-screen { border-radius: 30px; overflow: hidden; background: var(--kanso-paper); position: relative; }
.iphone-screen::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; background: #1a1a2e; border-radius: 12px; z-index: 2; }

.link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; }