/* NewsGo: Sanzo Wada theme.
   Muted pigment swatches on warm paper, flat fills, no shadows.
   Larger type and roomier spacing for readers with tired eyes.
   Loaded last in both layouts: remaps the --ng-* / --sp-* tokens and the
   Bootstrap variables, then overrides a few hardcoded rules.
   The markup is untouched. */

:root {
  --sz-paper:      #EFE6D2;
  --sz-paper-deep: #E4D8BC;
  --sz-surface:    #F8F2E4;
  --sz-ink:        #2D2B35;
  --sz-vermilion:  #B03F27;
  --sz-ochre:      #C2922D;
  --sz-pine:       #3F5A47;
  --sz-indigo:     #3A4668;
  --sz-rose:       #C99A93;
  --sz-line:       #C9BB9A;
  --sz-muted:      #4F473B;
  --sz-serif:      Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", serif;

  /* app.css tokens (admin) */
  --ng-red:    var(--sz-vermilion);
  --ng-red-dk: #8E301C;
  --ng-dark:   var(--sz-ink);
  --ng-mid:    #3A3744;
  --ng-muted:  var(--sz-muted);
  --ng-border: var(--sz-line);
  --ng-bg:     var(--sz-paper);

  /* public.css tokens (public site), type scale bumped for readability */
  --sp-accent:    var(--sz-vermilion);
  --sp-accent-h:  #8E301C;
  --sp-bg:        var(--sz-paper);
  --sp-surface:   var(--sz-surface);
  --sp-border:    var(--sz-line);
  --sp-text:      var(--sz-ink);
  --sp-muted:     var(--sz-muted);
  --sp-font:      var(--sz-serif);
  --sp-font-serif: var(--sz-serif);
  --sp-text-xs:   0.875rem;
  --sp-text-sm:   0.9375rem;
  --sp-text-base: 1.0625rem;
  --sp-text-md:   1.125rem;
  --sp-text-lg:   1.3rem;
  --sp-text-xl:   1.6rem;

  /* Bootstrap */
  --bs-body-bg:          var(--sz-paper);
  --bs-body-bg-rgb:      239, 230, 210;
  --bs-body-color:       var(--sz-ink);
  --bs-body-color-rgb:   45, 43, 53;
  --bs-secondary-color:  var(--sz-muted);
  --bs-secondary-bg:     var(--sz-paper-deep);
  --bs-tertiary-bg:      var(--sz-surface);
  --bs-border-color:     var(--sz-line);
  --bs-link-color:       var(--sz-vermilion);
  --bs-link-color-rgb:   176, 63, 39;
  --bs-link-hover-color: var(--sz-ink);
  --bs-border-radius:    0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}

html { font-size: 106.25%; }
html body {
  font-family: var(--sz-serif);
  background: var(--sz-paper);
  color: var(--sz-ink);
  line-height: 1.7;
}
.small, small { font-size: 0.9375rem !important; }

/* ── Flat and square ── */
.card, .btn, .badge, .form-control, .form-select, .dropdown-menu, .modal-content,
.alert, .auth-card, .tag-dropdown, .tag-chip-sel, .sp-cookie-btn, .ng-navbar .btn-outline-ng,
.ng-navbar .btn-solid-ng { border-radius: 0 !important; }
.shadow, .shadow-sm, .card, .auth-card, .tag-dropdown { box-shadow: none !important; }

/* ── Bootstrap utility colors are !important, so match that ── */
.bg-white, .bg-light { background-color: var(--sz-surface) !important; }
.text-dark { color: var(--sz-ink) !important; }
.text-secondary, .text-muted { color: var(--sz-muted) !important; }
.text-danger { color: var(--sz-vermilion) !important; }
.border { border-color: var(--sz-line) !important; }

/* ── Admin navbar: ink bar, vermilion rule ── */
.ng-navbar { border-bottom: 4px solid var(--sz-vermilion); }
.ng-navbar .navbar-brand { font-family: var(--sz-serif); font-style: italic; font-size: 1.6rem; letter-spacing: 0.01em; }
.ng-navbar .nav-link { font-size: 0.9375rem; color: #E4D8BC !important; }
.ng-navbar .nav-link:hover, .ng-navbar .nav-link.active { color: var(--sz-paper) !important; border-bottom-color: var(--sz-ochre); }
.ng-navbar .btn-outline-ng { font-size: 0.9375rem; padding: 0.4rem 1rem; border-color: rgba(239, 230, 210, 0.6); color: var(--sz-paper); }
.ng-navbar .btn-outline-ng:hover { background: var(--sz-ochre); border-color: var(--sz-ochre); color: var(--sz-ink); }
.ng-navbar .btn-solid-ng { font-size: 0.9375rem; padding: 0.4rem 1rem; }
.ng-user-pill { font-size: 0.9375rem; color: #E4D8BC; }
.ng-user-pill a { color: var(--sz-ochre); }

/* ── Public bar: ink with a vermilion rule ── */
.sp-bar { background: var(--sz-ink); border-bottom: 4px solid var(--sz-vermilion); }
.sp-bar-inner { padding: 0.7rem 1rem; }
.sp-brand { font-style: italic; font-size: 1.3rem; color: var(--sz-paper); }
.sp-nav a { color: var(--sz-paper); }
.sp-nav a:hover { color: var(--sz-ochre); }

/* ── Buttons ── */
.btn { font-weight: 600; }
.btn-primary, .btn-danger {
  --bs-btn-bg: var(--sz-vermilion);
  --bs-btn-border-color: var(--sz-vermilion);
  --bs-btn-color: var(--sz-paper);
  --bs-btn-hover-bg: var(--sz-ink);
  --bs-btn-hover-border-color: var(--sz-ink);
  --bs-btn-hover-color: var(--sz-paper);
  --bs-btn-active-bg: var(--sz-ink);
  --bs-btn-active-border-color: var(--sz-ink);
}
.btn-dark, .btn-secondary {
  --bs-btn-bg: var(--sz-ink);
  --bs-btn-border-color: var(--sz-ink);
  --bs-btn-color: var(--sz-paper);
  --bs-btn-hover-bg: var(--sz-vermilion);
  --bs-btn-hover-border-color: var(--sz-vermilion);
  --bs-btn-hover-color: var(--sz-paper);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
  --bs-btn-color: var(--sz-ink);
  --bs-btn-border-color: var(--sz-ink);
  --bs-btn-hover-bg: var(--sz-ochre);
  --bs-btn-hover-border-color: var(--sz-ochre);
  --bs-btn-hover-color: var(--sz-ink);
  --bs-btn-active-bg: var(--sz-ochre);
  --bs-btn-active-border-color: var(--sz-ochre);
  --bs-btn-active-color: var(--sz-ink);
}
.btn-link { color: var(--sz-vermilion); }
.btn-link:hover { color: var(--sz-ink); }
.sp-cookie { background: var(--sz-ink); border-top: 3px solid var(--sz-vermilion); }
.sp-cookie-btn--accept { background: var(--sz-paper); border-color: var(--sz-paper); color: var(--sz-ink); }
.sp-cookie-btn--accept:hover { background: var(--sz-ochre); border-color: var(--sz-ochre); }

/* ── Badges ── */
.badge { font-weight: 600; font-size: 0.875rem; padding: 0.3em 0.65em; }
.badge.bg-secondary { background-color: var(--sz-indigo) !important; }
.badge.bg-light, .badge.bg-white { background-color: var(--sz-paper-deep) !important; color: var(--sz-muted) !important; }

/* ── Fields: clear 2px ink outline ── */
.form-control, .form-select {
  border: 2px solid var(--sz-ink);
  background-color: var(--sz-surface);
  font-size: 1.0625rem;
  padding: 0.55rem 0.8rem;
}
.form-control:focus, .form-select:focus { border-color: var(--sz-vermilion); box-shadow: none; }
.form-control::placeholder { color: #6B6254; }
.form-label { font-weight: 600; }

/* ── Cards, tables, dropdowns ── */
.card, .auth-card, .tag-dropdown, .dropdown-menu { background: var(--sz-surface); border: 2px solid var(--sz-ink); }
.tag-dropdown-item { font-size: 1rem; padding: 0.5rem 0.8rem; color: var(--sz-ink); }
.tag-dropdown-item:hover { background: var(--sz-paper-deep); color: var(--sz-vermilion); }
.tag-chip-sel { font-size: 0.9375rem; background: var(--sz-ink); border-color: var(--sz-ink); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--sz-ink); --bs-table-border-color: var(--sz-line); font-size: 1rem; line-height: 1.6; }
.table > :not(caption) > * > * { padding: 0.8rem 1rem; }
.table thead th { border-bottom: 2px solid var(--sz-ink); font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--sz-paper-deep); }

/* ── Footer ── */
.sp-footer { border-top: 2px solid var(--sz-ink); padding: 1.25rem 1rem; font-size: 0.9375rem; color: var(--sz-muted); }
.sp-footer a, .sp-footer-btn { color: var(--sz-muted); font-size: 0.9375rem; text-decoration: underline; }
.sp-footer a:hover, .sp-footer-btn:hover { color: var(--sz-vermilion); }

/* ── Links and focus ── */
.sp-wrap a, .article-body a { text-decoration: underline; text-underline-offset: 3px; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 4px solid var(--sz-indigo); outline-offset: 3px; box-shadow: none; }
.ng-navbar :where(a, button):focus-visible, .sp-bar :where(a, button):focus-visible { outline-color: var(--sz-ochre); }

@media (max-width: 575.98px) { html { font-size: 112.5%; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }