/* ============================================================
   iPalettes — Chowdeck-inspired theme
   Scoped override, loaded AFTER modern.css on the iPalettes page.
   Orange primary, warm cream sections, pill buttons, chunky
   rounded cards, big bold geometric type. Playful & friendly.
   ============================================================ */

body[data-page="ipalettes"] {
  /* Chowdeck palette */
  --accent: #ff5c00;
  --accent-2: #ff8a3d;
  --accent-ink: #ffffff;

  --bg: #ffffff;
  --bg-alt: #fff4ec;          /* warm cream */
  --surface: #ffffff;
  --fg: #17110c;              /* near-black warm */
  --fg-soft: #5f554c;
  --fg-muted: #9a8f84;
  --border: #f0e7dd;          /* warm hairline */

  --radius: 22px;
  --radius-lg: 32px;

  --shadow-sm: 0 2px 4px rgba(23,17,12,.05);
  --shadow-md: 0 16px 40px -16px rgba(23,17,12,.18);
  --shadow-lg: 0 34px 70px -22px rgba(255,92,0,.30);

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  background: var(--bg);
  color: var(--fg);
}

@media (prefers-color-scheme: dark) {
  body[data-page="ipalettes"] {
    --bg: #14100d;
    --bg-alt: #1c1611;
    --surface: #1c1611;
    --fg: #f6efe8;
    --fg-soft: #cdbfb3;
    --fg-muted: #8f8478;
    --border: #2c231c;
  }
}

/* ---- Type: bolder, tighter, bigger ---- */
body[data-page="ipalettes"] h1,
body[data-page="ipalettes"] h2,
body[data-page="ipalettes"] h3 { font-weight: 800; letter-spacing: -0.035em; }
body[data-page="ipalettes"] h1 { font-size: clamp(2.7rem, 6.4vw, 4.6rem); line-height: 1.04; }
body[data-page="ipalettes"] h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
body[data-page="ipalettes"] .lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--fg-soft); }

/* ---- Eyebrow becomes a rounded chip ---- */
body[data-page="ipalettes"] .eyebrow {
  padding: 7px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent); letter-spacing: .02em; text-transform: none; font-size: .82rem; margin-bottom: 18px;
}

/* Nav pill styling now lives in modern.css (.nav-pills), shared by all pages.
   iPalettes keeps the dark brand pill on its warm palette via that shared rule. */

/* ---- Buttons & badges: fully rounded pills ---- */
body[data-page="ipalettes"] .btn { border-radius: 999px; font-weight: 700; padding: 14px 26px; }
body[data-page="ipalettes"] .store-badge { border-radius: 999px; padding: 11px 22px; }
body[data-page="ipalettes"] .store-badge.soon .tag { border-radius: 999px; }

/* ---- Hero: warm, playful ---- */
body[data-page="ipalettes"] .hero { background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
body[data-page="ipalettes"] .hero::before {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%);
}
body[data-page="ipalettes"] .hero-art img { border-radius: 40px; }

/* Bigger, punchier swatches */
body[data-page="ipalettes"] .swatches span { width: 40px; height: 40px; border-radius: 12px; }

/* ---- Feature cards: chunky, cream, rounded ---- */
body[data-page="ipalettes"] .card {
  background: var(--bg-alt); border: 0; border-radius: var(--radius-lg); padding: 34px 28px; box-shadow: none;
}
body[data-page="ipalettes"] .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border: 0; }
body[data-page="ipalettes"] .card .ico {
  width: 58px; height: 58px; border-radius: 17px; background: var(--accent); color: #fff; margin-bottom: 22px;
}
body[data-page="ipalettes"] .card .ico svg { width: 28px; height: 28px; }
body[data-page="ipalettes"] .card h3 { font-size: 1.28rem; }

/* Alternate card fills for playful rhythm */
body[data-page="ipalettes"] .grid-4 .card:nth-child(2) { background: #fff0e6; }
body[data-page="ipalettes"] .grid-4 .card:nth-child(4) { background: #fff0e6; }

/* ---- Gallery shots: rounder ---- */
body[data-page="ipalettes"] .gallery .shot { border-radius: 30px; border: 0; box-shadow: var(--shadow-md); }

/* ---- CTA band: solid orange, big radius ---- */
body[data-page="ipalettes"] .cta-band {
  background: var(--accent); border-radius: var(--radius-lg);
}
body[data-page="ipalettes"] .cta-band .store-badge { background: #17110c; border-color: #17110c; }

/* ---- Section-alt = cream ---- */
body[data-page="ipalettes"] .section-alt { background: var(--bg-alt); }

/* ---- Footer warm ---- */
body[data-page="ipalettes"] .footer { background: var(--bg-alt); }
body[data-page="ipalettes"] .footer h4 { color: var(--fg-muted); }