/* ==========================================================================
   TawkirJournal — "Aurora Ink" redesign (2026)
   Loaded AFTER base.css. Re-skins the existing token system + key components.
   No HTML or JS changes — only colors, type, surfaces, borders, motion — so
   every page and script keeps working. Light + dark both covered.
   ========================================================================== */

/* ---- Type: editorial serif display + Inter body -------------------------- */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Signature aurora gradient */
  --grad: linear-gradient(118deg, #0d9488 0%, #6d28d9 52%, #db2777 100%);
  --grad-soft: linear-gradient(118deg, rgba(13,148,136,.14), rgba(109,40,217,.12), rgba(219,39,119,.12));

  /* Brand accent → jewel teal */
  --accent: #0d9488;
  --accent-dark: #0f766e;
  --accent-light: #99f6e4;
  --accent-glow: rgba(13, 148, 136, 0.22);

  /* Warm-paper light surfaces */
  --bg: #f6f4ee;
  --bg-surface: #fffdf8;
  --bg-elevated: #efe9dc;
  --bg-hover: #f0ebe1;

  /* Warm ink text */
  --text: #1b1a16;
  --text-secondary: #565049;
  --text-muted: #9b948a;

  --border: #e8e1d3;
  --border-light: #f1ebdf;

  --shadow-sm: 0 1px 4px rgba(60, 50, 30, .06), 0 1px 2px rgba(60, 50, 30, .05);
  --shadow: 0 8px 24px -10px rgba(60, 50, 30, .18), 0 2px 6px rgba(60, 50, 30, .06);
  --shadow-lg: 0 20px 48px -18px rgba(40, 30, 20, .28);
  --shadow-xl: 0 32px 64px -24px rgba(40, 30, 20, .32);

  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --badge-orange-bg: rgba(13, 148, 136, .12);
}

[data-theme="dark"] {
  --accent: #2dd4bf;
  --accent-dark: #14b8a6;
  --accent-light: #5eead4;
  --accent-glow: rgba(45, 212, 191, 0.22);

  --bg: #0a0c11;
  --bg-surface: #11141b;
  --bg-elevated: #181c25;
  --bg-hover: #151922;

  --text: #ecebe5;
  --text-secondary: #9aa3b2;
  --text-muted: #69727f;

  --border: #232936;
  --border-light: #1a1f29;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.45);
  --shadow: 0 10px 28px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 22px 50px -18px rgba(0,0,0,.7);
}

/* ---- Ambient aurora wash behind everything (very subtle, fixed) ---------- */
body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  background-image:
    radial-gradient(40rem 30rem at 12% -8%, rgba(13,148,136,.10), transparent 60%),
    radial-gradient(36rem 28rem at 100% 0%, rgba(109,40,217,.09), transparent 55%),
    radial-gradient(40rem 30rem at 60% 120%, rgba(219,39,119,.06), transparent 60%);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(42rem 32rem at 10% -10%, rgba(45,212,191,.10), transparent 60%),
    radial-gradient(38rem 30rem at 100% 0%, rgba(124,58,237,.12), transparent 55%),
    radial-gradient(42rem 30rem at 65% 120%, rgba(219,39,119,.07), transparent 60%);
}

/* ---- Display typography -------------------------------------------------- */
h1, h2, h3, .nav-logo, .footer-brand-name,
.hero-title, .section-title, .post-card-title, .post-title,
.page-title, .article-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  font-weight: 600;
}
h1, .hero-title, .page-title, .article-title { font-weight: 600; letter-spacing: -0.025em; }

::selection { background: var(--accent); color: #fff; }

/* ---- Reading progress: aurora gradient ----------------------------------- */
#reading-progress { background: var(--grad) !important; box-shadow: 0 0 12px var(--accent-glow); }

/* ---- Navbar: refined glass + gradient brand ------------------------------ */
.navbar {
  background: color-mix(in srgb, var(--bg-surface) 78%, transparent) !important;
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-logo, .footer-brand-name {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* keep logo image (if any) visible; only tint text logos */
.nav-logo img { -webkit-text-fill-color: initial; }

.nav-link { position: relative; font-weight: 500; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--grad); border-radius: 2px; transition: width var(--duration, .25s) var(--ease, ease);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link:hover, .nav-link.active { color: var(--text); }

/* ---- Buttons ------------------------------------------------------------- */
.btn-primary {
  background: var(--grad) !important;
  border: none !important;
  box-shadow: 0 10px 24px -12px var(--accent-glow);
  transition: transform var(--duration-fast,.15s) var(--ease,ease), box-shadow var(--duration,.25s) var(--ease,ease);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); filter: saturate(1.05); }
.btn-theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Cards: refined border, hover lift, gradient top reveal -------------- */
.card, .post-card, article.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration,.25s) var(--ease,ease),
              box-shadow var(--duration,.25s) var(--ease,ease),
              border-color var(--duration,.25s) var(--ease,ease);
}
.card::before, .post-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration,.3s) var(--ease,ease);
}
.card:hover, .post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.card:hover::before, .post-card:hover::before { transform: scaleX(1); }

/* category badges / tags pick up the accent identity */
.badge-orange, .badge.badge-orange {
  background: var(--badge-orange-bg) !important;
  color: var(--accent-dark) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-theme="dark"] .badge-orange { color: var(--accent-light) !important; }

/* links inside article/post content adopt the accent */
.post-content a, .article-content a, .entry-content a, .prose a { color: var(--accent-dark); }
[data-theme="dark"] .post-content a, [data-theme="dark"] .prose a { color: var(--accent-light); }

/* ---- Footer -------------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-surface); }
.footer-link { transition: color var(--duration-fast,.15s) ease; }
.footer-link:hover { color: var(--accent); }
.footer-social-link { transition: transform var(--duration-fast,.15s) ease, background var(--duration,.25s) ease, color var(--duration,.25s) ease; }
.footer-social-link:hover { background: var(--grad); color: #fff; transform: translateY(-2px); border-color: transparent; }

/* ---- Back-to-top button (if present) ------------------------------------- */
#back-to-top { background: var(--grad) !important; border: none !important; }

/* ---- Cookie banner / alerts: tidy with new palette ----------------------- */
#cookie-consent-banner { border-top: 1px solid var(--border); }

/* ---- Focus visibility for keyboard users --------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ---- Section heading flourish: small gradient rule ----------------------- */
.section-title::after, .home-section-title::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: .6rem;
  background: var(--grad); border-radius: 3px;
}

/* ---- Respect reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card, .post-card, .btn-primary, .footer-social-link,
  .card::before, .post-card::before, .nav-link::after {
    transition: none !important;
  }
}