/* SENDJA theme — retunes the Classical design system's tokens and component
   layer to the studio's own direction: warm cream ground, Prata over Karla,
   hairline structure, pink as the action color. Loaded after styles.css. */

:root {
  --color-bg: #f2eee8;          /* beige ground */
  --color-surface: #eddcdc;      /* lightest pink — bands, footer, cards */
  --color-surface-2: #efc9c9;    /* medium pink — button ink, chips, rules */
  --color-text: #1c1a18;
  --color-accent: #e03582;       /* darkest pink — actions */
  --color-accent-2: #e03582;
  --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;

  --color-accent-100: #eddcdc;
  --color-accent-200: #efc9c9;
  --color-accent-300: #eb9fb9;
  --color-accent-400: #e66b9e;
  --color-accent-500: #e03582;
  --color-accent-600: #c72a71;
  --color-accent-700: #a41f5c;
  --color-accent-800: #7c1745;
  --color-accent-900: #55102f;
  --color-accent-2-100: #eddcdc;
  --color-accent-2-200: #efc9c9;
  --color-accent-2-300: #eb9fb9;
  --color-accent-2-400: #e66b9e;
  --color-accent-2-500: #e03582;
  --color-accent-2-600: #c72a71;
  --color-accent-2-700: #a41f5c;
  --color-accent-2-800: #7c1745;
  --color-accent-2-900: #55102f;

  --font-heading: "Prata", Georgia, "Times New Roman", serif;
  --font-heading-weight: 400;
  --font-body: "Karla", 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.008em; line-height: 1.14; }
h6 {
  font-family: var(--font-body); 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-body); 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-size: 10px; letter-spacing: 0.2em; 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; }

/* 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;
}