/* ReadMyLove — design tokens, one source for every stylesheet.

   styles.css (app + landing shell), landing-clean.css (#view-auth) and
   page.css (the 120 content pages) all read from here. Before this file the
   palette was declared twice and had already drifted: --border sat at 0.10 in
   the app and 0.12 on the content pages, so hairlines were a shade heavier
   there, and page.css's body font never received the CJK fallback the display
   font got. Tokens that belong to only one shell — the app measures, the page
   measures — stay in their own file.

   Loaded FIRST on every page. Nothing here may depend on anything else. */

:root {
  /* ── Palette ────────────────────────────────────────────────────────── */
  --bg:           #FBF6EE;   /* Warm Cream — primary background */
  --bg-2:         #F5EEFB;   /* Soft Lavender — surfaces & callouts */
  --bg-3:         #EDE2F8;
  --surface:      #FFFFFF;
  /* Dua garis, dua arti, dan bedanya harus dijaga: --border untuk permukaan
     diam, --border-hi hanya untuk yang bisa disentuh. Saat keduanya tertukar,
     kotak lembut bergaris ungu bisa berarti tombol atau sekadar panel, dan
     pengunjung tidak punya cara membedakannya. Pengecualian yang disengaja:
     di header, emas (--header-line) yang menarik garis, untuk kontrol juga. */
  --border:       rgba(36,27,44,0.10);   /* permukaan diam */
  --border-hi:    rgba(91,42,134,0.28);  /* kontrol: input, tombol hantu, chip */
  --overlay-bg:   rgba(36,27,44,0.55);

  --txt-1:        #241B2C;   /* Black Ink — body copy & UI text */
  /* Two steps, not three. --txt-3 existed as a lighter tertiary at 0.42 and
     had to be raised to 0.64 to clear AA on cream, which left it 2% from
     --txt-2 — a distinction nobody could see and everybody had to guess at.
     A third step cannot be lighter and still pass on this background, so
     there is no third step. */
  --txt-2:        rgba(36,27,44,0.66);

  --accent:       #5B2A86;   /* Sage Purple — brand primary, 9.2:1 on cream */
  --accent-h:     #3E1C5B;   /* Deep Violet on hover */
  --accent-dim:   rgba(91,42,134,0.10);
  --accent-glow:  rgba(91,42,134,0.18);

  /* Three golds, three jobs: ink needs contrast on cream, lift needs to read
     on deep purple, line is for hairlines and washes where contrast is moot.
     The channels of the last are kept separate so it can still take alpha. */
  --accent-gold:   #8A6513;         /* teks emas di atas latar terang, 4.94:1 */
  --landing-gold:  #E9CF8E;         /* teks emas di atas ungu pekat */
  --gold-line-rgb: 197, 160, 89;    /* garis & wash */

  --glass-bg:     rgba(91,42,134,0.04);
  --glass-bg-h:   rgba(91,42,134,0.07);
  --glass-blur:   20px;
  --dot-color:    transparent;

  --error:        #C0392B;   /* 5.05:1 on cream; the old #e74c3c was 3.55:1 */

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-ui:   'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --font-disp: 'Outfit', 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;

  /* ── Shape ──────────────────────────────────────────────────────────── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;
  --control-height: 44px;   /* smallest target a thumb hits reliably */
  --control-radius: 10px;   /* buttons, inputs, chips */

  /* ── Elevation — four roles, not seventeen values ───────────────────── */
  --shadow-soft:   0 18px 42px -34px rgba(62,28,91,0.42);
  --shadow-raised: 0 28px 70px -36px rgba(62,28,91,0.65);
  --shadow-bar:    0 10px 32px -28px rgba(62,28,91,0.50);  /* sticky bars */
  --shadow-panel:  0 4px 16px rgba(36,27,44,0.08);         /* dropdowns, toasts, modals */
  --shadow-lift:   0 10px 28px -6px rgba(62,28,91,0.38);   /* floating CTA */
  --shadow-lift-h: 0 14px 34px -6px rgba(62,28,91,0.48);
  --focus-ring:    0 0 0 3px rgba(91,42,134,0.18);         /* one ring everywhere */

  /* ── Sticky header chrome — the same bar on the landing and the 120
     content pages, so it must not be described twice ─────────────────── */
  --header-h:      73px;   /* 72px content + the hairline */
  --header-h-sm:   63px;
  --header-bg:     rgba(251,246,238,0.94);
  --header-line:   rgba(var(--gold-line-rgb), 0.5);   /* emas: detail yang ditahan, sesuai tema */

  /* ── Space ──────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.4,0,.2,1);
  --t1: 120ms;
  --t2: 240ms;
  --t3: 400ms;
}

/* ── Shared header control: the EN | ID switch ─────────────────────────────
   The one component both headers render identically, so it lives here — the
   only stylesheet every page loads — rather than as two copies that could
   drift the way the two header heights did. Everything above is tokens.

   The current language is a span, not a link: clicking it would go nowhere.
   Only the other language is interactive. Order is always EN then ID, so the
   highlight moves and the control does not. */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 2px;
  height: var(--control-height);
  padding: 3px;
  border: 1px solid var(--header-line);        /* the header's gold, not white on cream */
  border-radius: var(--control-radius);
  background: transparent;
}
.lang-switch__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 0 9px;
  border-radius: calc(var(--control-radius) - 3px);   /* concentric with the pill */
  color: var(--txt-2);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  transition: color var(--t1), background var(--t1);
}
.lang-switch__opt.is-current {
  color: var(--accent);
  background: var(--bg-2);
}
/* The link is 38x36 inside a 44px pill. The pseudo-element grows its touch
   target to 44x44 without changing how it looks: out to the pill's edge on
   the outer side, and only up to the neighbour on the inner side, so a tap
   on the current language never switches away from it. */
a.lang-switch__opt::after {
  content: "";
  position: absolute;
  inset: -4px -2px;
}
a.lang-switch__opt:first-child::after { left: -4px; }
a.lang-switch__opt:last-child::after  { right: -4px; }
a.lang-switch__opt:hover,
a.lang-switch__opt:focus-visible {
  color: var(--accent);
  background: rgba(var(--gold-line-rgb), 0.12);
  text-decoration: none;                        /* page.css underlines a:hover */
}
a.lang-switch__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* On the narrowest phones only the language you can switch to remains; the
   page itself already says which one you are reading. */
@media (max-width: 380px) {
  .lang-switch__opt.is-current { display: none; }
  .lang-switch__opt { min-width: 36px; }
  a.lang-switch__opt::after { inset: -4px; }   /* alone in the pill: all of it */
}


/* ── Shared footer: one footer on the landing, the app and every content page ──
   Logo left, links in the middle, copyright right; on phones the links sit in
   three even columns so none is stranded on a line of its own. Every link is a
   44px target. Lives here because tokens.css is the one sheet every page loads. */
.site-foot {
  margin-top: auto;
  border-top: 1px solid var(--header-line);
  background: var(--bg);
  color: var(--txt-2);
  font-family: var(--font-ui);
}
.site-foot__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px 32px;
  width: min(100%, calc(1120px + 2 * clamp(16px, 4vw, 40px)));
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 40px);
}
.site-foot__brand { display: inline-flex; align-items: center; min-height: 44px; }
.site-foot__brand img { display: block; height: 28px; width: auto; }
.site-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.site-foot__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--txt-2);
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--t1), background var(--t1);
}
.site-foot__links a:hover { color: var(--accent); background: var(--accent-dim); text-decoration: none; }
.site-foot__links a:focus-visible { outline: 3px solid rgba(91,42,134,.24); outline-offset: 2px; }
.site-foot__legal { margin: 0; font-size: 13px; white-space: nowrap; }
@media (max-width: 720px) {
  .site-foot__inner { grid-template-columns: 1fr; justify-items: start; padding-block: 24px 28px; }
  .site-foot__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 0 8px; }
  .site-foot__links a { justify-content: flex-start; padding: 0; text-align: left; }
}