/* NotePort design tokens — Direction 5 "The Productivity Suite" (shipped 2026-07-01)
   v1.1 (2026-07-02) — additive extension per design-system-spec.md D1:
   color promotions, CTA shadow / focus / motion tokens, spacing scale,
   error pair (O1 proposal), pill radius collapsed to 12px (O2). */

:root {
  /* Color — one confident accent on a light canvas */
  --np-teal:        #0E7A6E;  /* primary brand / CTA */
  --np-teal-deep:   #0A5C53;  /* hover, footers, emphasis */
  --np-teal-wash:   #E6F4F2;  /* selected states, pills, icon chips */
  --np-ink:         #1F2937;  /* headings, primary text */
  --np-slate:       #5B6773;  /* secondary text */
  --np-line:        #E5EAE9;  /* hairline borders */
  --np-amber:       #F0A92E;  /* ratings, highlights ONLY — never CTAs */
  --np-canvas:      #F8FAFA;  /* page background */
  --np-paper:       #FFFFFF;  /* cards, surfaces */

  /* Color promotions (v1.1) — already in production, now official.
     (--np-faint and --np-hero-wash were deleted 2026-08-06, W23 — zero uses.) */
  --np-text-strong: #374151;  /* body text that must hold on wash/canvas */
  --np-mist:        #FBFDFD;  /* panel/titlebar/sidebar background */
  --np-teal-tint:   #F5FBFA;  /* lightest teal surface: saving entries, quote blocks */
  --np-band-sub:    #C7E2DE;  /* sub-text on deep-teal band */
  --np-dot:         #E2E8E7;  /* window-chrome dots, inert indicators */
  --np-amber-wash:  #FFF8EC;  /* amber highlight box background (one-pager ROI pattern) */
  --np-amber-ink:   #7A5B1E;  /* text on amber wash */

  /* Semantic error (v1.1) — O1 PROPOSAL, pending ratification by Richard.
     Amber is banned from error duty (ratings/highlights only). */
  --np-error:       #B0453B;  /* muted brick — warm counterpart to the teal, not alarm-red */
  --np-error-wash:  #FAEDEB;  /* inline error background */

  /* Borders & tints (v1.2, 2026-07-13) — promoted for the 1a/1d/2a dashboards.
     The design mocks carry hairline/tint colors with no prior token; these fill the
     gap so app.jsx/app.css stay hex-free. Values are the mock's, mapped 1:1. */
  --np-teal-border:      #CFE3DF;  /* teal hairline on white pills, Copy-URI buttons, active chips */
  --np-teal-edge:        #A9CFC8;  /* dashed teal outline on latest-handoff / focus cards */
  --np-teal-count:       #4E8A80;  /* count numerals on a teal-wash chip (AA on --np-teal-wash) */
  --np-amber-border:     #F5D9A6;  /* amber-wash pill/box border (Next up, task pills, shelf band) */
  --np-amber-border-soft:#F0E3C6;  /* softer amber border — shelf/open-task cards on paper */
  --np-amber-wash-hi:    #FFF3DD;  /* amber-wash hover (Next up ticker, amber pills) */
  --np-line-strong:      #DDE2E0;  /* stronger hairline — dashed empty states, dashboard frame */

  /* Type */
  --np-font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --np-font-body:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  /* No monospace token exists on purpose. Marketing surfaces never use mono.
     In-product entry metadata uses --np-font-body at 11.5px in --np-slate. */

  /* Scale (--np-h1/h2/h3 were deleted 2026-08-06, W23 — zero uses; pages set
     heading fonts directly) */
  --np-body: 400 15px/1.6 var(--np-font-body);
  --np-small: 400 13px/1.5 var(--np-font-body);

  /* Shape & elevation */
  --np-top-h: 54px;         /* app shell top-bar row (the .np-shell grid row is the one
                               source of truth — .np-top carries no height of its own) */
  --np-radius-card: 12px;
  --np-radius-btn:  10px;   /* 10px everywhere — the board's 8px nav-CTA was mock noise */
  --np-radius-pill: 12px;   /* v1.1: collapsed from 20px — the board is the layout
                               authority and 12px is what ships (O2) */
  --np-shadow-card: 0 1px 3px rgba(31,41,55,.06);
  --np-shadow-pop:  0 14px 40px rgba(31,41,55,.10);
  --np-shadow-cta:  0 3px 10px rgba(14,122,110,.25);  /* CTA glow — was hand-copied ×3 */
  --np-border: 1px solid var(--np-line);

  /* Focus (v1.1) — pair with outline-offset: 2px */
  --np-focus: 2px solid var(--np-teal);

  /* Motion (v1.1) — the ONLY duration/easing values allowed on marketing surfaces.
     Reduced-motion disables both. */
  --np-t-fast:   .18s ease;                      /* hovers, small state changes */
  --np-t-reveal: .6s cubic-bezier(.2,.7,.2,1);   /* scroll reveals, entrances */

  /* Spacing (v1.1) — minimal 4px-base scale. Component internals use s1–s5;
     section rhythm uses s6–s8. Guidance, not straitjacket. */
  --np-s1: 4px;  --np-s2: 8px;  --np-s3: 12px; --np-s4: 16px;
  --np-s5: 24px; --np-s6: 32px; --np-s7: 48px; --np-s8: 72px;
}

/* Components — only the two rules whose `font:` shorthands still supply live
   line-height on index.html/legal pages survive here (W23, 2026-08-06 — the
   duplicated .np-cta/.np-card/.np-trust span::before went; noteport.css, linked
   AFTER this file, is the full component layer). */
.np-pill {
  display:inline-block; font:600 11px var(--np-font-body);
  color:var(--np-teal-deep); background:var(--np-teal-wash);
  border-radius:var(--np-radius-pill); padding:3px 10px;
}

.np-trust { font:var(--np-small); color:var(--np-text-strong); }
/* Trust strip contents, fixed order:
   Encrypted · You own your data · Delete everything, anytime · Guided setup with a human */