/* =========================================================================
   ciumsda.or.id tokens: the engraved chart. See apps/web/DESIGN.md.
   The field is the Jordan's sky blue, the deep accent is the All Things New indigo (#27306e);
   OKLCH so the hand-tint fills, the Sabbath night and the fields stay perceptually even.
   ========================================================================= */

@font-face {
  font-family: 'Zodiak';
  src: url('/fonts/Zodiak-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('/fonts/Zodiak-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('/fonts/Zodiak-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-var.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* All Things New, the public brand (its guidelines, p. 9): navy for "All Things", cyan for "New" */
  --atn-navy: #27306e;
  --atn-cyan: #16becf;
  /* ground and ink */
  --paper: oklch(0.95 0.025 85);
  --paper-deep: oklch(0.91 0.03 83);
  --ink: oklch(0.19 0.02 262);
  --ink-soft: oklch(0.3 0.02 262);
  --muted: color-mix(in oklch, var(--ink) 62%, var(--paper));
  --line: color-mix(in oklch, var(--ink) 14%, transparent);

  /* fields and tints */
  --cerulean: oklch(0.76 0.09 232);
  --indigo: oklch(0.34 0.107 273);
  --alert: oklch(0.52 0.17 29);
  --cobalt: oklch(0.42 0.17 265);
  --cobalt-night: oklch(0.24 0.09 265);
  --dusk: oklch(0.36 0.1 32);
  --gold: oklch(0.8 0.12 85);
  --silver: oklch(0.82 0.01 250);
  --bronze: oklch(0.62 0.11 55);
  --iron: oklch(0.42 0.015 250);
  --clay: oklch(0.6 0.07 45);

  /* type */
  --f-display: 'Zodiak', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-text: 'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-scripture: 'Literata', Georgia, serif;

  --t-mega: clamp(5rem, 1rem + 19vw, 19rem);
  --t-xxl: clamp(3.25rem, 1rem + 8vw, 9rem);
  --t-xl: clamp(2.5rem, 1.4rem + 4.8vw, 6rem);
  --t-l: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
  --t-m: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --t-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --t-s: 0.875rem;
  --t-xs: 0.75rem;

  /* space: four moods, not one constant */
  --gutter: clamp(16px, 2.2vw, 32px);
  --s-tight: clamp(48px, 6vw, 80px);
  --s-normal: clamp(80px, 10vw, 160px);
  --s-airy: clamp(120px, 16vw, 260px);

  /* shape */
  --r-pill: 999px;

  /* motion: one family */
  --ease-ink: cubic-bezier(0.2, 0.7, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-s: 180ms;
  --dur-m: 420ms;
  --dur-l: 900ms;

  color-scheme: light;
}

/* Moving between the site's pages crossfades instead of cutting (Chrome, Edge, Safari 18.2+;
   elsewhere the page simply loads). Under reduced motion there is no transition at all. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* =========================================================================
   The pages the app stores link to (privacy, support, delete-account). Reading pages in
   the engraved-chart system: tokens.css is prepended by the build; class names here never
   overlap landing.css (a test keeps them apart). Each page keeps its own <style> block.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  border-top: 6px solid var(--cerulean);
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: var(--indigo); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.doc h1, .doc h2, .doc h3 { font-family: var(--f-display); font-weight: 700; color: var(--ink); text-wrap: balance; }
.doc h1 { font-weight: 900; }
body .doc .updated { color: var(--muted); opacity: 1; } /* beats each page's own dimmed rule */
body .doc .langlink a { display: inline-flex; align-items: center; min-height: 32px; }
.doc th, .doc td { border-bottom-color: var(--line); }
.doc hr { border-top-color: var(--line); }
.doc code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* The English half of each bilingual page opens with its own title, set like the h1. */
.doc h2.doc-title-en { font-weight: 900; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.5rem; }

/* ---------- the way in and out: a skip link, the wordmark home, and the site's links ---------- */
.doc-skip { position: absolute; left: 16px; top: -80px; z-index: 10; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; }
.doc-skip:focus-visible { top: 12px; }
.doc-head { max-width: 46rem; margin: 0 auto; padding: 18px 1.5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.doc-home { display: inline-flex; align-items: center; min-height: 44px; color: var(--atn-navy); --atn-new: var(--atn-cyan); transition: opacity var(--dur-s) var(--ease-out); }
.doc-home svg { width: 156px; height: auto; }
.doc-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
  font-size: 0.875rem; font-weight: 700; text-decoration: none;
  transition: background-color var(--dur-s) var(--ease-out), scale 140ms var(--ease-out);
}
.doc-cta:active { scale: 0.96; }
@media (hover: hover) and (pointer: fine) {
  .doc-home:hover { opacity: 0.72; }
  .doc-cta:hover { background: var(--indigo); }
}
body .doc { padding-top: 2.5rem; padding-bottom: 4rem; }
.doc-foot { max-width: 46rem; margin: 0 auto; padding: 24px 1.5rem calc(72px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.doc-foot nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 6px; }
.doc-foot a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; }
.doc-foot a:hover { text-decoration: underline; }
/* a standalone link (in a list, or an address) is a 24px target at least */
.doc li > a, .doc a[href^="mailto:"] { display: inline-block; padding-block: 3px; }
@media (max-width: 520px) { .doc-cta { padding: 0 12px; font-size: 0.8125rem; } .doc-home svg { width: 136px; } }

.ads-consent, .ads-settings { font-family: var(--f-text); color: var(--ink); background: var(--paper); border: 1px solid var(--ink); font-size: 0.875rem; line-height: 1.5; z-index: 1000; }
.ads-consent { position: fixed; inset: auto 16px 16px auto; width: min(38rem, calc(100% - 32px)); padding: 24px; box-sizing: border-box; max-height: 75svh; overflow: auto; box-shadow: 0 8px 32px #10182526; }
.ads-consent[hidden], .ads-settings[hidden] { display: none; }
.ads-consent h2 { font-family: var(--f-text); font-size: 1.125rem; font-weight: 700; line-height: 1.3; margin: 0 0 8px; letter-spacing: 0; }
.ads-consent p { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.5; }
.ads-consent a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 32px; align-items: center; }
.ads-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ads-actions button, .ads-settings { min-height: 44px; padding: 10px 18px; font: inherit; font-weight: 600; border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; }
.ads-actions button { flex: 1 1 10rem; color: var(--ink); background: var(--paper); }
.ads-actions button:hover { background: var(--paper-deep); }
.ads-actions button:disabled { cursor: not-allowed; text-decoration: line-through; }
.ads-settings { position: fixed; bottom: 12px; right: 12px; padding: 8px 14px; font-size: 0.75rem; }
.ads-consent :focus-visible, .ads-settings:focus-visible { outline: 3px solid var(--indigo); outline-offset: 4px; }
@media (max-width: 420px) { .ads-consent { padding: 18px; } .ads-actions { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .ads-consent, .ads-settings { transition: none; animation: none; } }