/* ───────────────────────────────────────────────────────
   DI Platform · shared design tokens (Phase 14a)
   Single source of truth for colour, spacing, type.
   Every page imports this before its own <style>.
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;0,9..144,700;1,9..144,400&family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Surfaces */
  --canvas:   #F8FAFD;
  --canvas-2: #EEF2F8;
  --card:     #FFFFFF;
  --card-hover: #FBFCFE;

  /* Ink (text) */
  --ink:   #1A2238;
  --ink-2: #5B6B8A;
  --ink-3: #9AA6BE;
  --ink-4: #C8D2E2;

  /* Borders */
  --border:   #E2E7F1;
  --border-2: #D9DFEB;

  /* Gold (brand accent) */
  --gold:   #C8921A;
  --gold-2: #E8AC38;
  --gold-3: #FFD070;
  --aglow:  #FFF7E6;

  /* Semantic */
  --green:    #0FD49A;
  --green-bg: #E8FBF4;
  --red:      #FF4D6A;
  --red-bg:   #FFE7EC;
  --blue:     #3D8EFF;
  --blue-bg:  #F0F7FF;
  --purple:   #9B72FF;
  --purple-bg:#F4F0FF;
  --pink:     #FF6BB5;
  --pink-bg:  #FFF0F8;
  --orange:   #FF8030;
  --orange-bg:#FFE7CC;
  --teal:     #00C9C8;

  /* Shadows */
  --shadow-sm: 0 4px 12px -4px rgba(20,33,58,.08);
  --shadow:    0 18px 38px -16px rgba(20,33,58,.18);
  --shadow-lg: 0 32px 80px -16px rgba(20,33,58,.25);

  /* Type */
  --f-head: 'Fraunces', Georgia, serif;
  --f-ui:   'Outfit', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Radius */
  --r-sm: 7px;
  --r:    10px;
  --r-lg: 14px;

  /* Motion */
  --t: .2s;

  /* Layout */
  --topbar-h: 54px;
  --content-max: 1280px;

  /* Legacy aliases (kept so old per-page styles using --void / --t1 etc.
     keep working until each page is fully migrated) */
  --void: var(--canvas);
  --deep: var(--canvas-2);
  --navy: var(--card);
  --panel: var(--card);
  --card2: var(--canvas);
  --b1: var(--border);
  --b2: var(--border-2);
  --b3: var(--ink-4);
  --t1: var(--ink);
  --t2: var(--ink-2);
  --t3: var(--ink-3);
  --t4: var(--ink-4);
  --amber:  var(--gold);
  --amber2: var(--gold-2);
  --amber3: var(--gold-3);
}

/* Respect user motion preference everywhere */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* ─── Skeleton loaders (Phase 18.3) ─── */
.di-skel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #EEF2F8 0%, #F8FAFD 50%, #EEF2F8 100%);
  background-size: 200% 100%;
  animation: di-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  color: transparent;
  user-select: none;
}
.di-skel-line { height: 12px; margin: 6px 0; }
.di-skel-line.lg { height: 18px; }
.di-skel-line.sm { height: 9px; }
.di-skel-card { height: 120px; border-radius: 14px; }
.di-skel-circle { width: 32px; height: 32px; border-radius: 50%; display: inline-block; }

@keyframes di-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Visible focus rings (Phase 18.4 a11y) ─── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}