/* ==========================================================================
   CallingArt — Base Styles
   Shared across ALL pages. Loaded before style.css.
   Contains: reset, fonts, utility classes, brand helpers.
   ========================================================================== */


/* -------------------------------------------------- */
/*  1. Reset / Normalise                              */
/* -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif, "Noto Sans TC";
  background-color: #f7f9fb;
  color: #191c1e;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
}


/* -------------------------------------------------- */
/*  2. Material Symbols                               */
/* -------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1.2;
}


/* -------------------------------------------------- */
/*  3. Brand utilities                                */
/* -------------------------------------------------- */
.primary-gradient {
  background: linear-gradient(135deg, #004ac6 0%, #2563eb 100%);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.ghost-border {
  border: 1px solid rgba(115, 118, 134, 0.15);
}


/* -------------------------------------------------- */
/*  4. Generic utilities                              */
/* -------------------------------------------------- */
/* NOTE: .hidden is intentionally NOT defined here.
   Tailwind provides .hidden (display:none) as a utility class,
   and responsive modifiers like md:block / md:flex must be able
   to override it. Adding !important here would break that. */