/*
Theme Name: Observer's Log
Theme URI: https://observerlog.local
Author: Observer's Log Team
Author URI: https://observerlog.local
Description: A modern science blog theme with neomorphic design, light/dark mode, Markdown + LaTeX support, smart discovery, and a distraction-free reading experience.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: axiom
Tags: science, blog, dark-mode, neomorphic, gutenberg, custom-colors, responsive-layout
*/

/* ═══════════════════════════════════════════════════════
   SELF-HOSTED FONTS — Plus Jakarta Sans
   Eliminates Google Fonts CDN from the critical path.
   Files are in /assets/fonts/ (downloaded from fonts.gstatic.com)
   ═══════════════════════════════════════════════════════ */

/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./assets/fonts/plus-jakarta-sans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
    U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
    U+0329, U+1EA0-1EF9, U+20AB;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('./assets/fonts/plus-jakarta-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* Size-adjusted fallback: makes system-ui metrics match Plus Jakarta Sans
   so text barely reflowing when the web font swaps in (reduces CLS). */
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ═══════════════════════════════════════════════════════
   AXIOM DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Light mode = default, Dark mode via [data-theme="dark"]
   ═══════════════════════════════════════════════════════ */

:root,
html.light,
[data-theme="light"] {
  /* ── Backgrounds ── */
  --axm-bg:                  #e8eaf0;
  --axm-surface:             #e8eaf0;
  --axm-surface-container:   #e2e4ea;
  --axm-surface-high:        #dcdee4;
  --axm-surface-highest:     #d6d8de;
  --axm-surface-low:         #e5e7ed;
  --axm-surface-lowest:      #f0f2f8;
  --axm-surface-bright:      #edeef4;
  --axm-surface-dim:         #d4d6dc;
  --axm-surface-variant:     #dcdee4;

  /* ── Brand ── */
  --axm-primary:             #6366f1;
  --axm-primary-text:        #4338ca;
  --axm-primary-container:   #818cf8;
  --axm-primary-fixed:       #e0e2ff;
  --axm-primary-fixed-dim:   #a5b4fc;
  --axm-inverse-primary:     #a5b4fc;
  --axm-on-primary:          #ffffff;
  --axm-on-primary-fixed:    #1e1b4b;

  --axm-secondary:           #6c6e7e;
  --axm-secondary-container: #d8dae6;
  --axm-secondary-fixed:     #d8dae6;
  --axm-secondary-fixed-dim: #b8baca;
  --axm-on-secondary:        #ffffff;

  --axm-tertiary:            #7c3aed;
  --axm-tertiary-text:       #6d28d9;
  --axm-tertiary-container:  #a78bfa;
  --axm-tertiary-fixed:      #ede9fe;
  --axm-tertiary-fixed-dim:  #c4b5fd;
  --axm-on-tertiary:         #ffffff;

  /* ── Text ── */
  --axm-on-surface:          #2e3040;
  --axm-on-surface-variant:  #585a68;
  --axm-on-bg:               #2e3040;
  --axm-outline:             #8a8c9a;
  --axm-outline-variant:     #d0d2dc;
  --axm-inverse-surface:     #2e3040;
  --axm-inverse-on-surface:  #e8eaf0;

  /* ── Error ── */
  --axm-error:               #dc2626;
  --axm-error-container:     #fee2e2;
  --axm-on-error:            #ffffff;
  --axm-on-error-container:  #991b1b;

  /* ── Neomorphic shadows ── */
  --neo-raised:     6px 6px 12px rgba(0,0,0,0.08), -6px -6px 12px rgba(255,255,255,0.6);
  --neo-pressed:    inset 4px 4px 8px rgba(0,0,0,0.06), inset -4px -4px 8px rgba(255,255,255,0.5);
  --neo-float:      8px 8px 16px rgba(0,0,0,0.1), -8px -8px 16px rgba(255,255,255,0.7), 0 10px 20px rgba(0,0,0,0.08);
  --neo-nav:        6px 6px 12px rgba(0,0,0,0.08), -6px -6px 12px rgba(255,255,255,0.6);
  --neo-bottom-nav: 0 -8px 24px rgba(0,0,0,0.05);

  /* ── Radii ── */
  --r-sm:   0.5rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-xl:   2rem;
  --r-full: 9999px;

  /* ── Transitions ── */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.3s ease;
}

/* ── Dark mode ───────────────────────────────────────── */
html.dark,
[data-theme="dark"] {
  --axm-bg:                  #13131b;
  --axm-surface:             #13131b;
  --axm-surface-container:   #1f1f27;
  --axm-surface-high:        #292932;
  --axm-surface-highest:     #34343d;
  --axm-surface-low:         #1b1b23;
  --axm-surface-lowest:      #0d0d15;
  --axm-surface-bright:      #393841;
  --axm-surface-dim:         #13131b;
  --axm-surface-variant:     #34343d;

  --axm-primary:             #c0c1ff;
  --axm-primary-text:        #c0c1ff;
  --axm-primary-container:   #8083ff;
  --axm-primary-fixed:       #e1e0ff;
  --axm-primary-fixed-dim:   #c0c1ff;
  --axm-inverse-primary:     #494bd6;
  --axm-on-primary:          #1000a9;
  --axm-on-primary-fixed:    #07006c;

  --axm-secondary:           #c0c1ff;
  --axm-secondary-container: #42447b;
  --axm-secondary-fixed:     #e1e0ff;
  --axm-secondary-fixed-dim: #c0c1ff;
  --axm-on-secondary:        #292a60;

  --axm-tertiary:            #ffb783;
  --axm-tertiary-text:       #ffb783;
  --axm-tertiary-container:  #d97721;
  --axm-tertiary-fixed:      #ffdcc5;
  --axm-tertiary-fixed-dim:  #ffb783;
  --axm-on-tertiary:         #4f2500;

  --axm-on-surface:          #e4e1ed;
  --axm-on-surface-variant:  #c7c4d7;
  --axm-on-bg:               #e4e1ed;
  --axm-outline:             #908fa0;
  --axm-outline-variant:     #464554;
  --axm-inverse-surface:     #e4e1ed;
  --axm-inverse-on-surface:  #303038;

  --axm-error:               #ffb4ab;
  --axm-error-container:     #93000a;
  --axm-on-error:            #690005;
  --axm-on-error-container:  #ffdad6;

  --neo-raised:  -6px -6px 12px #252525, 6px 6px 12px #0f0f0f;
  --neo-pressed: inset 4px 4px 8px #0f0f0f, inset -4px -4px 8px #252525;
  --neo-float:   -8px -8px 16px #252525, 8px 8px 16px #0f0f0f, 0 10px 20px rgba(0,0,0,0.4);
  --neo-nav:     -6px -6px 12px #252525, 6px 6px 12px #0f0f0f;
  --neo-bottom-nav: 0 -6px 12px #0f0f0f;
}

/* ═══════════════════════════════════════════════════════
   BASE RESET & GLOBALS
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--axm-bg);
  color: var(--axm-on-surface);
  font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--t-slow), color var(--t-slow);
}

/* ── Typography scale ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', sans-serif;
  color: var(--axm-on-surface);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

p { color: var(--axm-on-surface-variant); line-height: 1.8; }

a { color: var(--axm-primary); text-decoration: none; transition: color var(--t-base); }
a:hover { color: var(--axm-tertiary); }

img { max-width: 100%; height: auto; display: block; }

/* ── Neomorphic utility classes ───────────────────────── */
.neo-raised  { box-shadow: var(--neo-raised);  background: var(--axm-surface); }
.neo-pressed { box-shadow: var(--neo-pressed); background: var(--axm-surface); }
.neo-float   { box-shadow: var(--neo-float);   background: var(--axm-surface); }

/* Interactive neo button feel */
.neo-btn {
  background: var(--axm-surface);
  box-shadow: var(--neo-raised);
  border: none;
  cursor: pointer;
  transition: all var(--t-base);
  font-family: inherit;
  color: var(--axm-on-surface);
}
.neo-btn:hover  { transform: translateY(-1px); box-shadow: var(--neo-float); }
.neo-btn:active {
  box-shadow: var(--neo-pressed);
  transform: scale(0.98) translateY(0);
}

/* ── Layout helpers ───────────────────────────────────── */
.axm-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .axm-container { padding: 0 2rem; }
}
@media (min-width: 1280px) {
  .axm-container { padding: 0 4rem; }
}

/* ── Selection ────────────────────────────────────────── */
::selection {
  background: var(--axm-primary-container);
  color: var(--axm-on-primary-fixed);
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--axm-surface-container); }
::-webkit-scrollbar-thumb { background: var(--axm-outline-variant); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--axm-primary); }

/* ── Focus ring ───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--axm-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Hide scrollbar utility ───────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Screen reader only ───────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Global hidden state reset ────────────────────────── */
[hidden] {
  display: none !important;
}

/* ── Default Circular Icon Avatar Styles ──────────────── */
.axm-default-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  vertical-align: middle;
  overflow: hidden;
  flex-shrink: 0;
}
.axm-default-avatar .material-symbols-outlined {
  display: block !important;
  font-size: 1.1em;
  line-height: 1 !important;
}

/* ── Prevent Layout Shifts for Material Icon ligatures before font loads ── */
.material-symbols-outlined {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  font-size: inherit;
  line-height: 1;
}