/* SENDJA theme — retunes the Classical design system's tokens and component
   layer to the studio's own direction: warm cream ground, hairline structure.
   Follows weareheartcore.com's system throughout: Sometype Mono (uppercase)
   for headings and actions, Inter for body copy, and — since the request to
   match their look extended to color — their monochrome palette: warm cream
   ground, dark ink as the one action color, no bright accent. The old pink
   scale is kept only as a comment below in case it's wanted back. */

:root {
  --color-bg: #f6f2ed;          /* warm cream ground, matches weareheartcore.com */
  --color-surface: #f8f4ee;      /* lightest neutral — bands, footer, cards */
  --color-surface-2: #ece5dc;    /* medium neutral — button ink, chips, rules */
  --color-text: #1c1a18;
  --color-accent: #332e27;       /* dark ink — the one action color, matches their buttons exactly */
  --color-accent-2: #332e27;
  --color-divider: color-mix(in srgb, #1c1a18 13%, transparent);

  --color-neutral-100: #f8f4ee;
  --color-neutral-200: #ece5dc;
  --color-neutral-300: #dcd2c6;
  --color-neutral-400: #c3baad;
  --color-neutral-500: #a29a8d;
  --color-neutral-600: #837b6f;
  --color-neutral-700: #635c52;
  --color-neutral-800: #45403a;
  --color-neutral-900: #2b2723;

  /* Old pink scale, unused now: 100 #eddcdc 200 #efc9c9 300 #eb9fb9
     400 #e66b9e 500 #e03582 600 #c72a71 700 #a41f5c 800 #7c1745 900 #55102f */
  --color-accent-100: #ece5dc;
  --color-accent-200: #dcd2c6;
  --color-accent-300: #c3baad;
  --color-accent-400: #a29a8d;
  --color-accent-500: #837b6f;
  --color-accent-600: #635c52;
  --color-accent-700: #332e27;
  --color-accent-800: #241f1a;
  --color-accent-900: #16130f;
  --color-accent-2-100: #ece5dc;
  --color-accent-2-200: #dcd2c6;
  --color-accent-2-300: #c3baad;
  --color-accent-2-400: #a29a8d;
  --color-accent-2-500: #837b6f;
  --color-accent-2-600: #635c52;
  --color-accent-2-700: #332e27;
  --color-accent-2-800: #241f1a;
  --color-accent-2-900: #16130f;

  --font-heading: "Sometype Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-heading-weight: 400;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 3px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2723 10%, transparent);
  --shadow-md: 0 3px 12px color-mix(in srgb, #2b2723 12%, transparent);
  --shadow-lg: 0 14px 40px color-mix(in srgb, #2b2723 16%, transparent);
}

body { margin: 0; font-weight: 400; line-height: 1.7; }
h1, h2, h3, h4, h5 {
  font-weight: 400; letter-spacing: -0.01em; line-height: 1.14;
  text-transform: uppercase;
}
h6 {
  font-family: var(--font-heading); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
}
a:not(.btn) { color: var(--color-accent-700); text-underline-offset: 4px; }
a:not(.btn):hover { color: var(--color-accent-600); }

/* Actions — pink pill primary, hairline pill secondary */
.btn {
  font-family: var(--font-heading); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; padding: 13px 26px;
}
.btn-primary {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface-2);
}
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-surface-2); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-surface-2); }
.btn-secondary { border-color: var(--color-text); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.btn-ghost { color: var(--color-accent-700); letter-spacing: 0.14em; padding: 6px 4px; }
.btn-ghost:hover { color: var(--color-accent-600); }
.btn-icon { width: 38px; height: 38px; padding: 0; }

/* Surfaces stay unfilled; hairlines carry the structure */
.card { border-radius: var(--radius-md); padding: var(--space-4); gap: var(--space-2); }
.card-kicker { font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-700); }
.card-title { font-size: 20px; letter-spacing: -0.008em; }
.card-body { font-size: 13px; opacity: 0.72; }

.tag {
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 13px;
}

.table th {
  font-family: var(--font-body); font-size: 9px; font-weight: 500;
  letter-spacing: 0.16em; padding: var(--space-2) var(--space-2);
}
.table td { padding: var(--space-3) var(--space-2); }

.input { border-radius: 999px; padding: 8px 14px; min-height: 38px; }
textarea.input { border-radius: var(--radius-md); }
.seg, .seg-opt { border-radius: 999px; }

.dialog { border-radius: var(--radius-lg); background: var(--color-bg); }
.dialog-title { font-size: 24px; }

/* The header is position:sticky with z-index:40 and, at the top of the page (before the
   scroll-collapse kicks in), tall enough to overlap a dialog's first field or two — without
   this, clicks there land on the header instead of the input underneath it. */
.dialog-backdrop { z-index: 60; }

/* Selected state for nav links, tabs, filters and view toggles — these carry
   inline color declarations, so the state needs to win over them. */
[aria-current="page"] {
  color: var(--color-accent-700) !important;
  border-color: var(--color-accent) !important;
}

/* Selected state on dark grounds — full-opacity white ink with an accent rule,
   since accent-700 sits at ~1.3:1 over the hero and the prototype bar. */
[data-on-dark][aria-current="page"] {
  color: #fffdfc !important;
  opacity: 1 !important;
  border-bottom-color: var(--color-accent) !important;
}