/* nonolingo, cocoa design system (design/DESIGN.md).
 *
 * Loaded after galley.css and styles.css on every sub page. It re-points their
 * tokens at the three brand colors, so the old galley components render dark:
 *   ink #0A0A0A (ground), paper #FFFFFF (text), accent #D4956A (nono's coat).
 * Every grey is paper at an opacity; every tint is accent at an opacity.
 * Accent never carries body text on light surfaces (contrast), only on dark.
 */

:root {
  /* galley.css + styles.css tokens, inverted onto ink */
  --ground: #0A0A0A;
  --ground-2: rgba(255, 255, 255, .04);
  --paper: #0A0A0A;
  --paper-deep: rgba(255, 255, 255, .06);
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .07);
  --surface-3: rgba(255, 255, 255, .10);
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, .86);
  --ink-mute: rgba(255, 255, 255, .58);
  --ink-muted: rgba(255, 255, 255, .58);
  --ink-faint: rgba(255, 255, 255, .36);
  --hairline: rgba(255, 255, 255, .09);
  --hairline-2: rgba(255, 255, 255, .16);
  --rule: rgba(255, 255, 255, .09);

  --accent: #D4956A;
  --red: #D4956A;
  --red-deep: #D4956A;
  --red-wash: rgba(212, 149, 106, .14);
  --pencil: #D4956A;
  --success: #D4956A;

  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 24px;
  --radius: 16px;

  --ring-outer: 0 0 0 1px rgba(255, 255, 255, .09);
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-sm: none;
  --shadow-md: 0 20px 50px -30px rgba(0, 0, 0, .8);
  --shadow-lg: 0 24px 60px -30px rgba(0, 0, 0, .9);
  --shadow-card: 0 20px 50px -30px rgba(0, 0, 0, .8);
  --shadow-float: 0 24px 60px -30px rgba(0, 0, 0, .9);
}

html, body { background: var(--ground); color-scheme: dark; }
body::before, body::after { display: none !important; } /* paper grain + red-pen spot */
::selection { background: rgba(212, 149, 106, .35); color: #fff; }

/* nav: blurred ink, like the homepage */
.nav { background: rgba(10, 10, 10, .72) !important; border-bottom: 1px solid var(--hairline); }
.wordmark .no { color: var(--accent) !important; font-style: normal; }
.nav-links a:not(.btn):hover { color: #fff; }

/* buttons: paper pill primary, graphite pill secondary */
.btn { border-radius: 999px; }
.btn:hover { background: rgba(255, 255, 255, .08); }
.btn-primary, .btn-pink, .btn-pro, .btn-cta, .btn-nav, .btn-red, .nd-btn-red {
  background: #fff !important; color: #0A0A0A !important; border-color: #fff !important; box-shadow: none !important;
}
.btn-primary:hover, .btn-pink:hover, .btn-pro:hover, .btn-cta:hover, .btn-nav:hover, .btn-red:hover, .nd-btn-red:hover {
  background: rgba(255, 255, 255, .84) !important; border-color: rgba(255, 255, 255, .84) !important;
}
.btn-ghost, .btn-free, .btn-life, .btn-yellow, .nd-btn {
  background: rgba(255, 255, 255, .12) !important; color: rgba(255, 255, 255, .86) !important; border-color: transparent !important;
}
.btn-ghost:hover, .btn-free:hover, .btn-life:hover, .btn-yellow:hover, .nd-btn:hover { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.btn .arrow, .btn-primary .arrow { background: rgba(10, 10, 10, .08) !important; }
.btn-ghost .arrow { background: rgba(255, 255, 255, .1) !important; }

/* cards, tiles, callouts: paper at 4% on ink, 24 radius, no hard shadows */
.card, .tile, .guide-card, .callout, .tier, .nl-pro-card, .price-card, .note, .steps > *, .nd-steps > * {
  background: rgba(255, 255, 255, .04);
  border-color: var(--hairline) !important;
}
.tile:hover, .guide-card:hover, .price-card:hover, .nl-pricing-grid > .card:hover {
  box-shadow: var(--ring-outer) !important; background: rgba(255, 255, 255, .06);
}
.price-card.featured, .nl-pricing-grid > .card.featured, .card.featured, .tier.featured {
  background: linear-gradient(180deg, rgba(212, 149, 106, .14), rgba(212, 149, 106, 0) 60%), rgba(255, 255, 255, .04) !important;
  border-color: rgba(212, 149, 106, .45) !important;
}
.callout { border-left-color: var(--accent) !important; }

/* small marks */
.keycap.accent, .chip-red, .stamp-red, .badge, .stamp { border-color: rgba(212, 149, 106, .4) !important; background: rgba(212, 149, 106, .12) !important; color: var(--accent) !important; }
.stamp-ok, .stamp-pencil { background: rgba(255, 255, 255, .06) !important; border-color: var(--hairline-2) !important; color: rgba(255, 255, 255, .86) !important; }
.prose code, code { background: rgba(255, 255, 255, .08) !important; color: #fff; }
.prose a, .lede a, .meta a { color: #fff; border-bottom-color: rgba(212, 149, 106, .6); }
.prose a:hover { color: var(--accent); }
.kicker { color: var(--accent) !important; }
.marquee::before { background: linear-gradient(90deg, var(--ground) 8%, rgba(10, 10, 10, 0)) !important; }
.marquee::after { background: linear-gradient(270deg, var(--ground) 8%, rgba(10, 10, 10, 0)) !important; }
.mac-bar { background: rgba(255, 255, 255, .04); }
.sug { background: rgba(255, 255, 255, .03); }
.sug.selected { border-color: rgba(212, 149, 106, .45); background: rgba(212, 149, 106, .1); }
.sug-tag.native { background: rgba(212, 149, 106, .16); border-color: rgba(212, 149, 106, .4); color: var(--accent); }
.sug-text .right { border-bottom-color: rgba(212, 149, 106, .6); }

/* product mockups keep a light (latte) surface, so they read like the real popup */
.popup { --ink: #0A0A0A; --ink-soft: rgba(10, 10, 10, .86); --ink-mute: rgba(10, 10, 10, .62); --ink-faint: rgba(10, 10, 10, .38);
  --hairline: rgba(10, 10, 10, .1); background: #fff !important; color: #0A0A0A; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8) !important; }

/* headings: Inter 500, tight, white; body grey */
h1, h2, h3 { color: #fff; font-weight: 500; letter-spacing: -.02em; }
h1 em, h2 em { font-style: normal; color: var(--accent); font-family: inherit; }
.lede { color: var(--ink-mute); }

/* brand mark in the nav is the poodle tile */
.brand img { border-radius: 8px; }