/* Shared design tokens + primitives for Ineng's standalone static pages
   (about.html, payo.html, kwentuhan.html, premium.html, the blog pages).
   Previously each of these pages hand-copied this same token block into its
   own <style>, with a comment claiming they were "kept in sync" — they
   weren't, which is why they drifted from the in-app screens before.
   Loading this one file everywhere means there is exactly one place to
   update. Values here are kept identical to index.html's inline :root block
   (which stays inline for offline-first PWA reliability) — if one changes,
   the other must too. Individual pages may still add a small local <style>
   block after this file for page-specific rules (component CSS unique to
   that page, or a one-off :root override like a different --title-color). */

:root {
  color-scheme: light dark;
  /* Ineng's own brand identity (teal, Tagalog-first) — this is an exact
     copy of the companion mobile app's actual design system: zero shadow
     anywhere, flat bordered surfaces, kept in sync with index.html's
     inline :root block (which stays inline for offline-first reliability).
     Icon chips (below) are the one deliberate exception, kept as-is since
     mobile has no equivalent tile-grid screen to mirror. */
  --bg: #FFFFFF;
  --bg-elevated: rgba(255,255,255,0.85);
  --card-bg: #F8FAFB;
  --card-border: #E0E0E0;
  --ink: #1A1A1A;
  --ink-soft: #7F8C8D;
  --ink-tertiary: #A9B4B5;
  --separator: #E0E0E0;
  --fill: #F0F2F3;
  --fill-strong: #E5E8E9;
  --shadow-soft: rgba(0,0,0,0.08);
  --shadow-card: none;

  --accent: #2E7D8C;
  --gold: #2E7D8C;
  --gold-deep: #256570;
  --burgundy: #E74C3C;
  --accent-blue: #0A84FF;
  --accent-purple: #AF52DE;
  --accent-teal: #17A897;
  --accent-green: #27AE60;
  --accent-community: #0891B2;
  --on-accent: #FFFFFF;

  --tint-teal: #E8F6F5;
  --tint-blue: #E6F3FF;
  --tint-purple: #F7EEFC;
  --tint-red: #FDEDEC;
  --tint-green: #E9F7EF;
  --tint-gold: #F0E9E0;
  --tint-community: #E6F4F7;
  /* Green is too light to clear 3:1 against any tint of itself, so
     fi-discount uses this deepened variant instead of --accent-green
     directly (which stays at full saturation elsewhere, e.g. buttons). */
  --icon-green: #1E7A46;

  --title-color: #2E7D8C;
  --warn-bg: #FDEEEA;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0F0F;
    --bg-elevated: rgba(26,26,26,0.85);
    --card-bg: #1A1A1A;
    --card-border: #333333;
    --ink: #F5F5F5;
    --ink-soft: #A0A0A0;
    --ink-tertiary: #6B6B6B;
    --separator: #333333;
    --fill: #262626;
    --fill-strong: #333333;
    --shadow-soft: rgba(0,0,0,0.4);
    --shadow-card: none;
    --gold-deep: #3D99AA;
    --burgundy: #EC7063;
    --accent-community: #22A5C9;
    --title-color: #3D99AA;
    --warn-bg: #3A2420;
    --tint-teal: #173336;
    --tint-blue: #152D46;
    --tint-purple: #2F2541;
    --tint-red: #392A2D;
    --tint-green: #1B392F;
    --tint-gold: #241F19;
    --tint-community: #19333E;
    --icon-green: #27AE60;
  }
}

* { box-sizing: border-box; }
/* Own display rules (block, flex, etc.) otherwise beat the UA [hidden]
   rule at equal specificity, so a hidden button/card would render anyway. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  padding: 0 16px calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg);
}
.page { width: 100%; max-width: 560px; }

.nav-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg);
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  margin: 0 -16px 18px;
  border-bottom: 1px solid var(--card-border);
}
.nav-back {
  display: inline-block; background: var(--fill); color: var(--ink);
  text-decoration: none; font-weight: 700; font-size: 16px;
  padding: 10px 16px; border-radius: 20px; min-height: 44px;
}

.top { text-align: center; margin-bottom: 18px; }
.top .logo {
  display: block; width: 84px; height: 84px; margin: 0 auto 10px;
  border-radius: 22px; border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
}
h1 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 800;
  font-size: 26px; line-height: 1.3; margin: 0; padding-bottom: 6px;
  display: inline-block; color: var(--title-color); border-bottom: 3px solid var(--gold);
}
.subtitle { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--ink-soft); }

/* Soft-shadow elevated card on the tinted page canvas — a genuine surface
   redesign, not a bordered-flat copy of the companion mobile app. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px; margin-bottom: 16px;
}
.card p { font-size: 15.5px; line-height: 1.6; font-weight: 600; color: var(--ink-soft); margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }

h2 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 800; font-size: 20px; margin: 0 0 6px; color: var(--ink); }

.cta { text-align: center; margin-top: 8px; }
.cta a.button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: white;
  text-decoration: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 700;
  padding: 15px; min-height: 56px; border-radius: var(--radius-md);
}
.cta .cta-sub { margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }

footer { margin-top: 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1.6; }