/* Harbor design system — the single source of truth for this app's surface.
 * Never hard-code a hex, radius, or type stack in a component; add a token here.
 * Spec and rationale: docs/design-system.md */

:root{
  /* ---- accent: one harbor navy for every action - buttons, links, focus,
   *      selected state. Nothing else carries a hue. ---- */
  --color-primary:      #0b3d66;
  --color-primary-soft: #e8eef4;   /* selected nav row, hover wash */
  --color-on-primary:   #ffffff;

  /* ---- surface: bright white page, cool pearl-grey panels ---- */
  --color-canvas:       #ffffff;
  --color-canvas-soft:  #f5f5f7;   /* cards, sidebar, inputs, sheets */
  --color-hairline:     #e3e3e8;   /* 1px dividers */
  --color-scrim:        rgba(29,29,31,.28);
  --shadow-float:       0 12px 32px rgba(29,29,31,.14), 0 1px 3px rgba(29,29,31,.08);
  /* the ask box only: the one surface that waits for you */
  --shadow-rest:        0 1px 2px rgba(29,29,31,.04), 0 6px 24px rgba(29,29,31,.06);

  /* ---- text ---- */
  --color-ink:          #1d1d1f;
  --color-body-strong:  #3a3a3c;
  --color-body:         #515154;
  --color-mute:         #68686d;   /* 4.74:1 on the selected-row wash, the lowest surface it sits on */

  /* ---- spacing (4px base) ---- */
  --space-xxs:2px; --space-xs:4px;  --space-sm:8px;  --space-md:10px;
  --space-lg:16px; --space-xl:24px; --space-2xl:32px;
  --space-3xl:48px; --space-4xl:64px; --space-5xl:96px;

  /* ---- radius: soft and friendly. Buttons are pills. ---- */
  --rounded-none:0;  --rounded-xxs:2px; --rounded-xs:4px; --rounded-sm:8px;
  --rounded-md:12px; --rounded-lg:18px; --rounded-pill:9999px;

  /* ---- type: the platform's own face (SF Pro on Apple devices, Inter
   *      elsewhere). Mono only for verbatim document text. ---- */
  --font-sans:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:ui-monospace, 'SF Mono', SFMono-Regular, monospace;
  /* editorial serif: page titles, the greeting, and Ask's answers - the
   *      voice of the service, never controls, labels or figures */
  --font-serif:'Newsreader', 'New York', ui-serif, Georgia, serif;

  /* ---- motion: quick and quiet. Never on reduced-motion. ---- */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.14s; --dur-base:.22s; --dur-slow:.32s;

  --container-max:1200px;
}

/* ---- type scale ----
 * Headings are semibold with slight negative tracking. Numbers everywhere use
 * tabular figures so columns of dates and dollars line up. */
.t-display-lg     { font:600 40px/44px   var(--font-sans); letter-spacing:-.6px; }
.t-serif          { font-family:var(--font-serif); font-weight:500; letter-spacing:-.4px;
                    font-optical-sizing:auto; }
.t-display-md     { font:600 28px/34px   var(--font-sans); letter-spacing:-.4px; }
.t-display-sm     { font:600 22px/28px   var(--font-sans); letter-spacing:-.3px; }
.t-body-lg        { font:400 18px/28px   var(--font-sans); }
.t-body-md        { font:400 16px/24px   var(--font-sans); }
.t-body-md-strong { font:600 16px/24px   var(--font-sans); }
.t-body-sm        { font:400 14px/20px   var(--font-sans); }
.t-body-sm-strong { font:600 14px/20px   var(--font-sans); }
.t-caption        { font:400 12px/16px   var(--font-sans); }
.t-quote          { font:400 13px/18px   var(--font-mono); }
.num              { font-variant-numeric:tabular-nums; }

/* ---- components ---- */

.btn{
  font:600 15px/20px var(--font-sans);
  border-radius:var(--rounded-pill);
  padding:var(--space-md) 20px;
  border:1px solid transparent; cursor:pointer; background:none;
  color:var(--color-ink);
  min-height:44px;                     /* WCAG floor on touch */
  transition:transform .08s ease, background-color .15s ease;
}
.btn:active:not(:disabled){ transform:scale(.97); }
.btn-primary{ background:var(--color-primary); color:var(--color-on-primary); border-color:var(--color-primary); }
.btn-primary:hover:not(:disabled){ opacity:.92; }
.btn-outline{ background:var(--color-canvas); color:var(--color-primary); border-color:var(--color-hairline); }
.btn-outline:hover:not(:disabled){ background:var(--color-primary-soft); }
.btn:disabled{ opacity:.4; cursor:default; }
/* compact: for an action inside a row. Drawn 32px tall; the ::after keeps
   the tap target at the 44px floor. */
.btn-sm{ font-size:13px; line-height:18px; padding:var(--space-xs) var(--space-md);
         min-height:32px; position:relative; }
.btn-sm::after{ content:''; position:absolute; inset:-6px 0; }
.btn:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* card: pearl panel, no border, no shadow */
.card{
  background:var(--color-canvas-soft);
  border:1px solid transparent;
  border-radius:var(--rounded-lg);
  padding:var(--space-xl);
}

/* status pill: fill for "act on this", outline for information */
.pill{
  display:inline-block;
  font:500 12px/16px var(--font-sans);
  border:1px solid var(--color-hairline);
  border-radius:var(--rounded-pill);
  padding:2px var(--space-sm);
  color:var(--color-body);
}
.pill-fill{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-on-primary); }

/* table: sentence-case labels over hairline-ruled rows */
.table-header{
  font:600 13px/16px var(--font-sans);
  color:var(--color-mute);
  border-bottom:1px solid var(--color-hairline);
}
.table-row{ border-bottom:1px solid var(--color-hairline); }

.input{
  background:var(--color-canvas-soft); color:var(--color-ink);
  border:1px solid transparent; border-radius:var(--rounded-md);
  padding:var(--space-md) 14px;
  font:400 16px/22px var(--font-sans); width:100%;
}
.input:focus{ outline:none; border-color:var(--color-primary); background:var(--color-canvas); }
.input::placeholder{ color:var(--color-mute); }

a{ color:var(--color-primary); }
a.btn{ text-decoration:none; }