/* ═══════════════════════════════════════════════════════════════
   PulseVault — Shared Design System
   Full specification: doc/uxd/DESIGN.md
   ═══════════════════════════════════════════════════════════════ */

/* ——— Color Palette (OKLCH) ———
   Full palette documented in doc/uxd/DESIGN.md § Color.
   Token names used in comments below match DESIGN.md tables.
   WCAG AA target (4.5:1 normal text, 3:1 UI components).
   ——————————————————————————————————————————————————————————————— */

/* ——— Spacing Scale (4px grid) ———
   sp-1:   4px    micro gaps (name->meta, pill padding-block)
   sp-2:   8px    element gaps (logo, buttons, inline margins)
   sp-3:  12px    component gaps (section head, grid gap, row gap)
   sp-4:  16px    standard (card padding, status margin)
   sp-5:  20px    page gutter (horizontal rhythm for nav, sections)
   sp-6:  24px    section spacing (vertical margins, top-bar top)
   sp-8:  32px    large separation
   sp-10: 40px    page bottom
   ——————————————————————————————————————————————————————————————— */

/* ——— Type Scale (fixed rem) ———
   xs:   0.8125rem (13px) timestamps, file sizes, pills, trustee roles
   sm:   0.875rem (14px)  nav, pulse, buttons, metadata
   base: 1rem (16px)      doc names, trustee names, body
   lg:   1.25rem (20px)   section headings
   xl:   1.625rem (26px)  page title (1.375rem / 22px on mobile)
   ——————————————————————————————————————————————————————————————— */


/* ——— Reset & Body ——— */
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Atkinson Hyperlegible Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  color:oklch(30% 0.036 30);
  background:oklch(99.2% 0.003 67);
  line-height:1.5;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
  hyphens:auto
}


/* ——— Skip Link ——— */
.skip-link{
  position:absolute;top:-100%;left:1rem;z-index:100;
  padding:8px 16px;background:oklch(30% 0.036 30);color:oklch(96.9% 0.028 79);
  font-size:0.875rem;font-weight:500;border-radius:0 0 8px 8px;
  text-decoration:none;transition:top 0.15s ease
}
.skip-link:focus{top:0}


/* ——— Focus ——— */
:focus-visible{outline:2px solid oklch(58.2% 0.189 38);outline-offset:2px}
:focus:not(:focus-visible){outline:none}


/* ——— Page Shell ——— */
.page{max-width:900px;margin:0 auto;background:oklch(99.2% 0.003 67);min-height:100vh}


/* ——— Nav ——— */
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid oklch(93.1% 0.010 68)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.logo-mark{width:28px;height:28px;border-radius:8px;background:oklch(58.2% 0.189 38);display:flex;align-items:center;justify-content:center}
.logo-mark svg{width:16px;height:16px}
.logo-text{
  font-family:'Literata',Georgia,serif;
  font-size:0.875rem;font-weight:600
}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-link{
  display:inline-flex;align-items:center;
  padding:8px 12px;min-height:44px;
  font-size:0.875rem;font-weight:400;color:oklch(45% 0.049 39);
  text-decoration:none;border-radius:8px;
  transition:background 0.15s ease,color 0.15s ease
}
.nav-link:hover{background:oklch(95% 0.013 64);color:oklch(30% 0.036 30)}
.nav-link:active{background:oklch(93.1% 0.010 68)}
.nav-link[aria-current="page"]{color:oklch(53.6% 0.180 35);font-weight:500}
.avatar-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;min-height:44px;min-width:44px;
  border-radius:50%;background:oklch(96.9% 0.028 79);
  font-size:0.8125rem;font-weight:600;color:oklch(53.6% 0.180 35);
  text-decoration:none;transition:background 0.15s ease
}
.avatar-link:hover{background:oklch(92.1% 0.069 77)}
.avatar-link:active{background:oklch(87.4% 0.110 76)}


/* ——— Headings ——— */
.page-title{
  font-family:'Literata',Georgia,serif;
  font-size:1.625rem;font-weight:600;
  line-height:1.2;color:oklch(30% 0.036 30)
}
.section-title{
  font-family:'Literata',Georgia,serif;
  font-size:1.25rem;font-weight:600;
  line-height:1.3;color:oklch(30% 0.036 30)
}


/* ——— Buttons ——— */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;min-height:44px;
  border:none;border-radius:8px;
  font-family:inherit;font-size:0.875rem;font-weight:600;
  cursor:pointer;
  transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease
}
.btn-primary{background:oklch(58.2% 0.189 38);color:#fff}
.btn-primary:hover{background:oklch(53.6% 0.180 35);color:#fff}
.btn-primary:active{background:oklch(30% 0.036 30);color:#fff}
.btn-secondary{background:transparent;color:oklch(30% 0.036 30);border:1px solid oklch(85.3% 0.013 41)}
.btn-secondary:hover{background:oklch(95% 0.013 64);border-color:oklch(75.2% 0.023 39)}
.btn-secondary:active{background:oklch(93.1% 0.010 68)}
.btn:disabled{opacity:0.4;cursor:not-allowed}
.btn svg{width:16px;height:16px;vertical-align:middle;flex-shrink:0}


/* ——— Pills & Dots ——— */
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 12px;border-radius:9999px;
  font-size:0.8125rem;font-weight:600;
  text-transform:uppercase;
  flex-shrink:0
}
.pill-active{background:oklch(97% 0.021 128);color:oklch(46.7% 0.121 138)}
.pill-pending{background:oklch(96.9% 0.028 79);color:oklch(53.6% 0.180 35)}
.pill-draft{background:oklch(97.2% 0.008 74);color:oklch(45% 0.049 39)}
.dot{width:8px;height:8px;border-radius:50%}
.dot-green{background:oklch(57.9% 0.137 135)}
.dot-orange{background:oklch(58.2% 0.189 38)}
.dot-gray{background:oklch(64.7% 0.033 41)}


/* ——— Sections ——— */
.section{padding:0 20px;margin-top:24px;margin-bottom:24px}
.section-head{margin-bottom:12px}
.section:last-child{padding-bottom:40px}


/* ——— Action Links ——— */
.action-link{
  color:oklch(53.6% 0.180 35);text-decoration:none;font-weight:500;
  transition:color 0.15s ease
}
.action-link:hover{color:oklch(30% 0.036 30)}
.action-link:active{opacity:0.6}


/* ——— Reduced Motion ——— */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important
  }
}


/* ——— Responsive ——— */
@media(max-width:640px){
  .page-title{font-size:1.375rem}
}