/* ═══════════════════════════════════════════════════════════════
   TINS — DESIGN TOKENS  (single source of truth)
   Used by header, footer, and all pages going forward.
   Drop this file BEFORE style.css in includes/header.php.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand greens (TINS navy-green identity) ── */
  --c-brand-50:  #ECFDF5;
  --c-brand-100: #D1FAE5;
  --c-brand-200: #A7F3D0;
  --c-brand-300: #6EE7B7;
  --c-brand-400: #34D399;
  --c-brand-500: #10B981;
  --c-brand-600: #059669;
  --c-brand-700: #047857;
  --c-brand-800: #065F46;
  --c-brand-900: #064E3B;
  --c-brand-950: #032E1F;

  /* ── Neutrals (Slate scale) ── */
  --c-neutral-0:   #FFFFFF;
  --c-neutral-50:  #F8FAFC;
  --c-neutral-100: #F1F5F9;
  --c-neutral-200: #E2E8F0;
  --c-neutral-300: #CBD5E1;
  --c-neutral-400: #94A3B8;
  --c-neutral-500: #64748B;
  --c-neutral-600: #475569;
  --c-neutral-700: #334155;
  --c-neutral-800: #1E293B;
  --c-neutral-900: #0F172A;

  /* ── Accent (used sparingly) ── */
  --c-accent-amber-bg:  #FFFBEB;
  --c-accent-amber-fg:  #B45309;
  --c-accent-amber-bd:  #FDE68A;
  --c-accent-blue-bg:   #EFF6FF;
  --c-accent-blue-fg:   #1D4ED8;
  --c-accent-blue-bd:   #BFDBFE;
  --c-accent-rose:      #F43F5E;
  --c-accent-sky:       #0EA5E9;

  /* ── Semantic surfaces ── */
  --surface-page:    var(--c-neutral-50);
  --surface-card:    var(--c-neutral-0);
  --surface-muted:   var(--c-neutral-100);
  --surface-inverse: var(--c-brand-950);

  /* ── Text ── */
  --text-strong: var(--c-neutral-900);
  --text-base:   var(--c-neutral-700);
  --text-muted:  var(--c-neutral-500);
  --text-on-brand: var(--c-neutral-0);
  --text-on-dark:  rgba(255,255,255,.85);
  --text-on-dark-muted: rgba(255,255,255,.55);

  /* ── Borders ── */
  --border-subtle:  var(--c-neutral-200);
  --border-default: var(--c-neutral-300);
  --border-brand:   var(--c-brand-200);

  /* ── Typography ── */
  --fh: 'Georgia', 'Times New Roman', serif;        /* headings */
  --fb: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* body */
  --fm: 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Type scale (perfect-fourth inspired, capped) */
  --fs-xs:   .72rem;
  --fs-sm:   .82rem;
  --fs-base: .95rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;

  /* ── Spacing scale (4px baseline) ── */
  --s-0: 0;
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  /* ── Radii ── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ── Shadows (soft, layered) ── */
  --sh-xs:  0 1px 2px rgba(15,23,42,.04);
  --sh-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md:  0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --sh-lg:  0 10px 30px rgba(15,23,42,.08), 0 4px 10px rgba(15,23,42,.05);
  --sh-xl:  0 20px 50px rgba(15,23,42,.12);
  --sh-brand: 0 8px 24px rgba(5,150,105,.22);
  --sh-brand-lg: 0 12px 32px rgba(5,150,105,.32);

  /* ── Motion ── */
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ease-in:  cubic-bezier(.6,.1,.8,.4);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  /* ── Layering ── */
  --z-topbar:  1050;
  --z-header:  1040;
  --z-nav:     1030;
  --z-overlay: 1100;
  --z-modal:   1200;
  --z-toast:   1300;

  /* ── Layout ── */
  --container-max: 1240px;
  --header-h: 76px;
}

/* ── Body baseline (only if not already set elsewhere) ── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fb);
  color: var(--text-base);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Modern focus ring (accessible) ── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── Smooth view transitions between pages (modern browsers) ── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--dur-base); }

/* ── Reduced motion respect ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Lightweight utility helpers (only what header/footer need) ── */
.t-strong { color: var(--text-strong) !important; }
.t-muted  { color: var(--text-muted)  !important; }
.t-brand  { color: var(--c-brand-700) !important; }

.bg-brand   { background: var(--c-brand-700) !important; }
.bg-brand-soft { background: var(--c-brand-50) !important; }
.bg-dark-brand { background: var(--c-brand-950) !important; }

.shadow-soft { box-shadow: var(--sh-sm) !important; }
.shadow-pop  { box-shadow: var(--sh-lg) !important; }

.r-pill { border-radius: var(--r-pill) !important; }
.r-md   { border-radius: var(--r-md)   !important; }
.r-lg   { border-radius: var(--r-lg)   !important; }