:root{
  /* ============================================================
     ICOM Nepal — Stitch "Institutional Archive & Editorial
     System" design tokens. See /stitch-source/DESIGN.md for the
     full spec these were traced from.
     Existing --color-* / --brand / --navy names are kept as
     aliases so older markup that still references them renders
     correctly without a rewrite.
     ============================================================ */
  --brand:#0b63ce;            /* primary-container */
  --brand-2:#155EEF;          /* brand-blue-vibrant */
  --brand-deep:#124E96;       /* hover state for primary */
  --brand-3:#eff4ff;          /* surface-container-low */
  --navy:#071B34;             /* institutional-navy */
  --ink:#0F172A;              /* charcoal-ink */
  --body:#334155;             /* slate-body */
  --muted:#64748B;            /* slate-muted */
  --line:#E2E8F0;             /* border-hairline */
  --line-strong:#CBD5E1;      /* border-structural */
  --paper:#F8FAFC;            /* surface-subtle */
  --panel:#F1F5F9;            /* surface-panel */
  --white:#FFFFFF;            /* surface-canvas */
  --accent:#D9A441;           /* heritage-gold */
  --accent-subtle:#FBF6EC;    /* heritage-gold-subtle */

  /* Back-compat aliases so existing utility classes/components keep working */
  --color-primary: var(--brand);
  --color-primary-light: var(--brand-2);
  --color-primary-dark: var(--navy);
  --color-accent: var(--accent);
  --color-gold: var(--accent);
  --color-bg: var(--paper);
  --color-surface: var(--white);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);

  /* Stitch prohibits soft/ambient shadows and blur — surfaces are flat and
     separated by 1px hairline borders instead. Kept as 'none' rather than
     removing the variables so any leftover box-shadow: var(--shadow) rule
     degrades to flat instead of breaking. */
  --shadow: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Stitch shape scale: 4px micro, 8px standard, 10–12px featured ceiling. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-heading: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;

  /* Stitch calls for instantaneous/150ms linear micro-shifts, not eased
     hover animation. */
  --ease: linear;
  --transition-base: all .15s linear;
}

.dark {
  --color-bg: #0b1420;
  --color-surface: #101c2c;
  --color-text: #e5e7eb;
  --color-text-muted: #9aa4b2;
}

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

/* ============================================================
   INTERACTIVE POLISH — v2
   The client asked for a livelier, more "attractive" feel with
   smooth hover animation. This intentionally goes beyond the
   original flat/no-shadow rule: buttons and cards now lift with
   a soft brand-tinted shadow on hover, nav links get an animated
   underline, and everything transitions on a slightly longer,
   smoother curve than the base 150ms linear cut used elsewhere.
   ============================================================ */
:root {
  --transition-smooth: all .25s cubic-bezier(.4,0,.2,1);
  --shadow-hover: 0 14px 32px rgba(7,27,52,.14);
  --shadow-hover-brand: 0 10px 26px rgba(21,94,239,.28);
}

.hover-lift { transition: var(--transition-smooth); }
.hover-lift:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  transition: var(--transition-smooth);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(7,27,52,.08);
}
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: var(--shadow-hover-brand); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(7,27,52,.08); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}
.btn-secondary:hover { background: var(--paper); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-secondary:active { transform: translateY(0); box-shadow: none; }

.btn-dark {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}
.btn-dark:hover { background: #0d2a4c; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-dark:active { transform: translateY(0); box-shadow: none; }

/* Animated underline for nav-style text links. Pair with a
   <span class="link-underline-fx"></span> sibling inside the <a>. */
.link-underline { position: relative; }
.link-underline-fx {
  position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--brand); border-radius: 999px;
  transition: right .3s cubic-bezier(.4,0,.2,1);
}
.link-underline:hover .link-underline-fx { right: 0; }

/* Reusable card lift — pair with the existing hairline-border
   card markup already used across every list/grid page. */
.card-hover-lift { transition: var(--transition-smooth); }
.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--brand) !important;
}

/* Icon micro-motion helper (arrow nudges right on hover, etc.) */
.icon-nudge { transition: transform .25s cubic-bezier(.4,0,.2,1); }
.group:hover .icon-nudge, a:hover .icon-nudge, button:hover .icon-nudge { transform: translateX(3px); }