/* Kivios Design System — single source of truth.
   Soft & Modern. Poppins (display) + Inter (body). WCAG AA enforced. */

:root {
  /* Brand & accents */
  --indigo: #6366F1;        /* base — UI/large/decoration only, NOT small text on white */
  --indigo-dark: #4338CA;   /* accent TEXT on white (~7:1 AA) */
  --indigo-600: #4F46E5;    /* button bg (white label passes AA) */
  --teal: #14B8A6;          /* decoration only */
  --teal-dark: #0F766E;     /* decoration only */
  --coral: #FF7A6B;         /* decoration only */
  --sun: #FBBF24;           /* decoration only */

  /* Neutrals */
  --ink: #0F172A;           /* body text */
  --slate-600: #475569;     /* secondary text (AA on white) */
  --slate-400: #94A3B8;     /* placeholder/disabled/decoration only */
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white: #FFFFFF;

  /* Tinted pill pairs (all AA) */
  --pill-indigo-bg: #EEF2FF; --pill-indigo-fg: #4338CA;
  --pill-teal-bg:   #CCFBF1; --pill-teal-fg:   #0F766E;
  --pill-green-bg:  #DCFCE7; --pill-green-fg:  #166534;

  /* Type */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-label: .8125rem; --fs-body: 1rem; --fs-h3: 1.25rem;
  --fs-xl: 1.5rem; --fs-h2: 1.875rem; --fs-display: 2.5rem;

  /* Radius / shadow / spacing */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-full: 9999px;
  --sh-sm: 0 1px 2px rgba(0,0,0,.05);
  --sh-md: 0 4px 10px rgba(0,0,0,.06);
  --sh-lg: 0 14px 30px rgba(0,0,0,.10);
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2rem; --sp-6:2.5rem; --sp-8:4rem;
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-body);
  line-height: 1.6; color: var(--ink); background: var(--white);
}
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--sp-3); color: var(--ink); }
h1 { font-size: var(--fs-display); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--sp-3); color: var(--slate-600); }
a { color: var(--indigo-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-3); }
.eyebrow { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--slate-600); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  padding: .7rem 1.25rem; border-radius: var(--r-md); border: none; cursor: pointer;
  transition: background-color .2s ease, transform .15s ease; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--indigo-600); color: var(--white); }
.btn-primary:hover { background: var(--indigo-dark); color: var(--white); }
.btn-kid { background: var(--teal-dark); color: var(--white); border-radius: var(--r-full); }
.btn-kid:hover { background: var(--teal-dark); color: var(--white); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-ghost { background: var(--white); color: var(--indigo-dark);
  box-shadow: inset 0 0 0 1.5px #C7D2FE; }
.btn-ghost:hover { background: var(--pill-indigo-bg); color: var(--indigo-dark); box-shadow: inset 0 0 0 1.5px var(--indigo); }

/* Pills */
.pill { display: inline-block; font-size: var(--fs-label); font-weight: 600;
  padding: .25rem .75rem; border-radius: var(--r-full); }
.pill-indigo { background: var(--pill-indigo-bg); color: var(--pill-indigo-fg); }
.pill-teal   { background: var(--pill-teal-bg);   color: var(--pill-teal-fg); }
.pill-new    { background: var(--pill-green-bg);  color: var(--pill-green-fg); }

/* Cards */
.card { background: var(--white); border: 1px solid var(--slate-200);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

/* Accessibility */
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card:hover { transform: none; }
}

/* Section rhythm */
.section { padding: var(--sp-8) 0; }
.section-tint { background: var(--slate-50); }

/* Header */
.skip-link { position: absolute; left: var(--sp-2); top: var(--sp-2); }
.skip-link:focus { position: fixed; width:auto; height:auto; clip:auto; z-index: 100;
  background: var(--white); padding: .5rem .75rem; box-shadow: var(--sh-md); }
.site-header { background: var(--white); border-bottom: 1px solid var(--slate-200); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: var(--sp-4); height: 4.25rem; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; color: var(--indigo-dark); }
.brand:hover { text-decoration: none; }
.primary-nav { margin-left: auto; }
.nav-list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav-link { display: inline-block; padding: .5rem .7rem; border-radius: var(--r-sm);
  font-weight: 500; font-size: .9375rem; color: var(--ink); }
.nav-link:hover { background: var(--slate-100); color: var(--indigo-dark); text-decoration: none; }
.nav-toggle { display: none; margin-left: auto; background: none; border: none; color: var(--ink); cursor: pointer; padding: .4rem; }
.mobile-nav { border-top: 1px solid var(--slate-200); background: var(--white); }
.nav-list-mobile { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.nav-list-mobile a { display: block; padding: .85rem var(--sp-3); color: var(--ink); font-weight: 500;
  border-bottom: 1px solid var(--slate-100); }
.nav-list-mobile a:hover { background: var(--slate-50); text-decoration: none; }
@media (max-width: 860px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Footer */
.site-footer { background: var(--slate-50); border-top: 1px solid var(--slate-200); margin-top: var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-5); padding: var(--sp-8) var(--sp-3) var(--sp-5); }
.footer-brand { font-size: 1.25rem; }
.footer-blurb { margin-top: var(--sp-2); max-width: 34ch; }
.footer-head { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-600); margin-bottom: var(--sp-3); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-links a { color: var(--slate-600); font-weight: 500; }
.footer-links a:hover { color: var(--indigo-dark); }
.footer-bottom { border-top: 1px solid var(--slate-200); padding: var(--sp-4) var(--sp-3); color: var(--slate-600); font-size: var(--fs-label); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Homepage */
.hero { background: linear-gradient(135deg, #EEF2FF, #F0FDFA); }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-5); align-items: center; padding: var(--sp-8) var(--sp-3); }
.hero-sub { font-size: 1.125rem; max-width: 46ch; }
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.tile { display: block; }
.tile:hover { text-decoration: none; }
.tile-art { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.tile-body { padding: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.parents-cta { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--r-xl); padding: var(--sp-6); }
/* Placeholders for not-yet-created art */
.placeholder { display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, var(--slate-100), var(--slate-100) 12px, var(--slate-50) 12px, var(--slate-50) 24px);
  color: var(--slate-600); font-family: var(--font-display); font-weight: 600; border-radius: var(--r-lg); }
.placeholder-hero { aspect-ratio: 4/3; }
@media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tile-grid { grid-template-columns: 1fr; } }

/* Tailwind-utility guard: legacy styles.css overrides .object-cover to contain and
   loads before this file on pages like /about/. Restore true cover semantics here;
   kivios-coloring.css deliberately re-overrides to contain (after this file) so
   coloring line-art never crops. */
.object-cover { object-fit: cover; }