/* ShortletBox — design tokens.
 *
 * Canonical source: branding/Brand Guidelines.html. Keep the two in step.
 *
 * Navy builds, Ember invites. Deep Navy carries every structural surface —
 * type, headers, containers. Ember is reserved for the moment of entry: the
 * door, a primary action, the word "Box". Hold Ember under roughly 15% of any
 * composition. Ember is a shape colour, not a text colour: on light surfaces
 * text uses Ember 600 (5.4:1), never Ember itself (3.6:1, large type only).
 */

:root {
  /* core */
  --sb-navy: #14284B;          /* primary — type, headers, containers */
  --sb-ember: #E4602F;         /* accent — doors, primary actions */
  --sb-mist: #F6F7F9;          /* app surface */
  --sb-paper: #FFFFFF;         /* base background, reversed type */

  /* navy range */
  --sb-navy-500: #2E4E86;
  --sb-navy-600: #1E3866;
  --sb-navy-700: #0D1B33;

  /* ember range */
  --sb-ember-100: #FCE7DD;     /* tint fills */
  --sb-ember-300: #F9B392;     /* ember tints on navy */
  --sb-ember-400: #F07B4B;     /* ember as text on navy (5.9:1) */
  --sb-ember-600: #C44A1C;     /* ember as text on light, and hover */

  /* neutral ramp */
  --sb-slate: #364357;         /* secondary type */
  --sb-muted: #7A8699;         /* tertiary type, labels */
  --sb-faint: #9BA5B5;         /* quietest type */
  --sb-line: #B9C1CD;          /* strong rules, control outlines */
  --sb-border: #E6E9EF;        /* default 1px border */
  --sb-border-soft: #EFF1F5;   /* hairlines inside cards */
  --sb-wash: #F1F3F7;          /* quiet fills */
  --sb-tint: #FBFCFD;          /* barely-there fills */
  --sb-on-navy-muted: #9BAAC4; /* secondary type on a navy surface (5.2:1) */

  /* semantic — each state carries a fill, a border and a text weight, because a
     status chip that only has one of the three has to invent the other two. */
  --sb-success: #17845A;
  --sb-success-700: #0F6244;
  --sb-success-100: #E6F3EC;
  --sb-warning: #C97A11;
  --sb-warning-700: #8A5410;
  --sb-warning-200: #F0DCB4;
  --sb-warning-100: #FBEEDA;
  --sb-danger: #C63434;
  --sb-danger-700: #8E2323;
  --sb-danger-200: #F1C7C7;
  --sb-danger-100: #FAE7E7;
  --sb-info: #2E6BE6;

  /* radii */
  --sb-r-sm: 8px;
  --sb-r-md: 12px;
  --sb-r-lg: 18px;
  --sb-r-xl: 26px;
  --sb-r-pill: 999px;

  /* shadow — navy-tinted, flat surfaces, no glass */
  --sb-sh-soft: 0 1px 2px rgba(20, 40, 75, 0.05), 0 4px 16px rgba(20, 40, 75, 0.05);
  --sb-sh-card: 0 1px 2px rgba(20, 40, 75, 0.05), 0 10px 28px -10px rgba(20, 40, 75, 0.14);
  --sb-sh-lift: 0 22px 52px -18px rgba(20, 40, 75, 0.24);

  /* type */
  --sb-font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sb-font-text: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sb-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale */
  --sb-t-display: 44px;
  --sb-t-display-ls: -0.03em;
  --sb-t-h1: 30px;
  --sb-t-h1-ls: -0.025em;
  --sb-t-h2: 22px;
  --sb-t-body: 14px;
  --sb-t-small: 11.5px;
  --sb-t-label: 10px;
  --sb-t-label-ls: 0.16em;
}

/* striped placeholder for imagery */
.sb-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(20, 40, 75, 0.05) 0 8px,
      rgba(20, 40, 75, 0.09) 8px 16px
    ),
    linear-gradient(180deg, var(--sb-wash) 0%, var(--sb-border) 100%);
  color: var(--sb-muted);
  font-family: var(--sb-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
}
.sb-placeholder::after {
  content: attr(data-label);
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 4px 8px;
  background: var(--sb-paper);
  border-radius: 6px;
  font-size: 10px;
}

/* base resets for ShortletBox surfaces */
.sb-root {
  font-family: var(--sb-font-text);
  color: var(--sb-navy);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
.sb-root h1, .sb-root h2, .sb-root h3, .sb-root h4 {
  font-family: var(--sb-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--sb-navy);
}
.sb-root button { font-family: inherit; }

/* pill input */
.sb-pill-input {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sb-paper);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-r-pill);
  padding: 10px 16px;
  font-size: 14px;
  color: var(--sb-navy);
}
.sb-pill-input:focus-within {
  border-color: var(--sb-navy-500);
  box-shadow: 0 0 0 4px rgba(46, 78, 134, 0.12);
}

/* button */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--sb-r-pill);
  font-family: var(--sb-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sb-btn:active { transform: translateY(1px); }
.sb-btn-primary {
  background: var(--sb-navy);
  color: var(--sb-paper);
}
.sb-btn-primary:hover { background: var(--sb-navy-600); }
.sb-btn-ember {
  background: var(--sb-ember);
  color: var(--sb-paper);
}
.sb-btn-ember:hover { background: var(--sb-ember-600); }
.sb-btn-ghost {
  background: transparent;
  color: var(--sb-navy);
  border-color: var(--sb-border);
}
.sb-btn-ghost:hover { border-color: var(--sb-navy); }

/* chip */
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--sb-r-pill);
  font-size: 13px;
  color: var(--sb-slate);
  background: var(--sb-paper);
  border: 1px solid var(--sb-border);
}
.sb-chip.is-active {
  background: var(--sb-navy);
  color: var(--sb-paper);
  border-color: var(--sb-navy);
}

/* misc */
/* Eyebrow/label style. Slate, not muted: at this size WCAG AA needs 4.5:1 and
   muted (#7A8699) only reaches 3.7:1 on white. 500 is Plex Mono's heaviest
   loaded weight — 600+ would be faux-bold. On navy surfaces override the
   colour (e.g. var(--sb-wash)); slate disappears there. */
.sb-mono { font-family: var(--sb-font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-slate); }
.sb-card { background: var(--sb-paper); border-radius: var(--sb-r-md); border: 1px solid var(--sb-border); box-shadow: var(--sb-sh-soft); }
.sb-divider { height: 1px; background: var(--sb-border); }

/* scrollbars (subtle) */
.sb-root ::-webkit-scrollbar { width: 8px; height: 8px; }
.sb-root ::-webkit-scrollbar-thumb { background: var(--sb-line); border-radius: 4px; }
.sb-root ::-webkit-scrollbar-track { background: transparent; }