/* =========================================================
   SoftTwinPlus 1.0 - theme.css
   Design tokens, reset and base typography.
   ========================================================= */

/* ---------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------- */
:root {
  color-scheme: light;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Theme designer values (declared in <b:skin>) override these fallbacks */
  --ui-page: var(--skin-page, #f4f6fb);
  --ui-surface: #ffffff;
  --ui-surface-muted: #f8fafc;
  --ui-glass: rgb(255 255 255 / .74);
  --ui-glass-strong: rgb(255 255 255 / .92);
  --ui-border: #e4e9f2;
  --ui-border-soft: rgb(226 232 240 / .8);
  --ui-text: var(--skin-text, #3b4a5f);
  --ui-heading: var(--skin-heading, #0f172a);
  --ui-muted: #6b7a90;
  --ui-accent: var(--skin-accent, #4f46e5);
  --ui-link: var(--skin-link, var(--ui-accent));
  --ui-accent-hover: var(--skin-accent-hover, #4338ca);
  --ui-dark: var(--skin-dark, #0f172a);
  --ui-footer-text: var(--skin-footer, #b6c2d4);
  --ui-accent-soft: #eef2ff;
  --ui-success: #10b981;
  --ui-warning: #f59e0b;
  --ui-error: #ef4444;
  --newsplus-red: #ff3b30;
  --newsplus-dark: #0f172a;

  --grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
  --grad-brand-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 55%, #9333ea 100%);
  --grad-pill: linear-gradient(to right, rgb(224 231 255 / .9), rgb(237 233 254 / .9));
  --grad-pill-hover: linear-gradient(to right, rgb(199 210 254 / .95), rgb(221 214 254 / .95));
  --grad-glass: linear-gradient(145deg, rgb(255 255 255 / .94), rgb(248 250 252 / .66));

  --ui-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 12px 28px -22px rgb(15 23 42 / .28);
  --ui-shadow-hover: 0 2px 6px rgb(15 23 42 / .05), 0 22px 46px -24px rgb(79 70 229 / .42);
  --ui-shadow-glow: 0 12px 28px -12px rgb(99 102 241 / .55);
  --soft-card-shadow: var(--ui-shadow);

  --blur-glass: saturate(160%) blur(14px);
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --header-height: 52px;
  --mobile-height: 56px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* One rhythm for every widget stack: the same gap between cards and the
     same padding inside them, in the sidebar, featured bands, main column
     and footer. Change these two values to retune all of them at once. */
  --widget-gap: 16px;
  --widget-pad: 16px;
}

/* ---------------------------------------------------------
   2. Reset & base
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--ui-page);
  background-image:
    radial-gradient(1100px 620px at 6% -12%, rgb(224 231 255 / .85), transparent 62%),
    radial-gradient(900px 540px at 102% -4%, rgb(250 232 255 / .7), transparent 58%),
    radial-gradient(820px 560px at 50% 112%, rgb(219 234 254 / .6), transparent 62%);
  background-attachment: fixed;
  color: var(--ui-text);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-x: clip;
}

a,
a:visited {
  color: var(--ui-link);
  text-decoration: none;
  transition: color .18s var(--ease);
}
a:hover { color: var(--ui-accent-hover); }

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}
img[width][height] { height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--ui-heading);
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.012em;
}

p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }
input[type="search"]::-webkit-search-decoration { display: none; }

.clearfix { clear: both; }
.section, .widget, .widget ul { margin: 0; padding: 0; }
.widget > h2, .widget > h3 { display: none; }
#navbar-iframe, .widget-item-control, a.quickedit, .home-link, .feed-links { display: none !important; }
.theme-options { display: none; }
.separator a { clear: none !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.CSS_LIGHTBOX { z-index: 999999 !important; }

/* Accessibility helpers */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}