/* ============================================================================
   IntelligentShortlist — theme layer
   Forks the Oak Data Solutions tokens (colors_and_type.css) into a LIGHT
   paper-first surface with a calmer DEEP TEAL accent replacing the oxide red.
   A [data-surface="dark"] variant flips the same semantic vars to the
   canonical near-black ink look. Everything below references --is-* semantics
   so components don't care which surface is active.
   ============================================================================ */

:root,
[data-surface="light"] {
  --surface:          #F4EFE4;   /* warm paper */
  --surface-raised:   #FCFAF4;   /* cards / panels */
  --surface-sunken:   #ECE5D6;   /* insets, wells */
  --text:             #181715;   /* near-black warm ink */
  --text-muted:       #5F5B53;   /* secondary copy */
  --text-faint:       #8C877C;   /* metadata, eyebrows */
  --hairline:         rgba(24, 23, 21, 0.12);
  --hairline-strong:  rgba(24, 23, 21, 0.22);
  --accent:           #0E6E60;   /* deep teal */
  --accent-deep:      #0A5347;
  --accent-soft:      rgba(14, 110, 96, 0.11);
  --accent-line:      rgba(14, 110, 96, 0.30);
  --accent-fg:        #F7F3EA;
  --excluded:         #A14233;   /* used only for the "never scored on" strike */
  --scrim:            rgba(24, 23, 21, 0.45);
}

[data-surface="dark"] {
  --surface:          #0E0E0F;   /* ink */
  --surface-raised:   #1A1A1B;
  --surface-sunken:   #080808;
  --text:             #EDE6D6;   /* cream */
  --text-muted:       #A8A39A;
  --text-faint:       #74716A;
  --hairline:         rgba(237, 230, 214, 0.10);
  --hairline-strong:  rgba(237, 230, 214, 0.22);
  --accent:           #34A691;   /* brighter teal for contrast on ink */
  --accent-deep:      #2A8576;
  --accent-soft:      rgba(52, 166, 145, 0.16);
  --accent-line:      rgba(52, 166, 145, 0.32);
  --accent-fg:        #07120F;
  --excluded:         #D08374;
  --scrim:            rgba(0, 0, 0, 0.55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-fg); }

/* ----- Layout ----- */
.is-container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 768px) { .is-container { padding: 0 24px; } }

.is-section { padding: 112px 0; position: relative; }
.is-section--tight { padding: 88px 0; }
@media (max-width: 768px) { .is-section { padding: 72px 0; } }

.is-section-head { display: flex; flex-direction: column; gap: 18px; max-width: 720px; margin-bottom: 64px; }
.is-section-head--center { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }

/* ----- Type helpers bound to --text ----- */
.is-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint);
  display: inline-flex; align-items: center; gap: 10px;
}
.is-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent);
  display: inline-block;
}
.is-eyebrow--bare::before { display: none; }

.is-display {
  font-family: var(--font-display); font-weight: 800; color: var(--text);
  font-size: var(--size-hero); letter-spacing: -0.035em; line-height: 0.94;
  text-wrap: balance;
}
.is-h1 { font-family: var(--font-display); font-weight: 800; color: var(--text); font-size: var(--size-h1); letter-spacing: -0.025em; line-height: 1.0; text-wrap: balance; }
.is-h2 { font-family: var(--font-display); font-weight: 800; color: var(--text); font-size: var(--size-h2); letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; }
.is-h3 { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: var(--size-h3); letter-spacing: -0.01em; line-height: 1.2; }
.is-h4 { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: var(--size-h4); line-height: 1.25; }

.is-body { font-family: var(--font-body); font-size: var(--size-body); line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.is-lead { font-family: var(--font-body); font-size: 20px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.is-small { font-family: var(--font-body); font-size: var(--size-small); line-height: 1.5; color: var(--text-muted); }
.is-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-faint); }
.is-accent-text { color: var(--accent); }

/* ----- Buttons ----- */
.is-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 15px 24px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; line-height: 1; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.is-btn .is-arrow { transition: transform var(--dur-fast) var(--ease-out); }
.is-btn:hover .is-arrow { transform: translateX(3px); }
.is-btn-primary { background: var(--accent); color: var(--accent-fg); }
.is-btn-primary:hover { background: var(--accent-deep); }
.is-btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline-strong); }
.is-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.is-btn-lg { padding: 18px 28px; font-size: 16px; }

/* ----- Pills ----- */
.is-pill {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  padding: 7px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}
.is-pill-accent { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.is-pill-neutral { background: transparent; color: var(--text-faint); border: 1px solid var(--hairline); }

/* ----- Fields ----- */
.is-field { display: flex; flex-direction: column; gap: 9px; }
.is-field-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }
.is-ctrl {
  background: var(--surface-raised); border: 1px solid var(--hairline);
  color: var(--text); font-family: var(--font-body); font-size: 15px;
  padding: 14px 16px; border-radius: 2px; outline: none; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.is-ctrl::placeholder { color: var(--text-faint); }
.is-ctrl:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
select.is-ctrl { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(-45deg, transparent 50%, var(--text-faint) 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; cursor: pointer; }

/* ----- Mark (teal IS square) ----- */
.is-mark {
  background: var(--accent); color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.05em;
  flex-shrink: 0; border-radius: 2px;
}

/* ----- Hairline divider ----- */
.is-rule { height: 1px; background: var(--hairline); border: none; }

/* entry animation */
@keyframes is-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.is-rise { animation: is-rise var(--dur-slow) var(--ease-out) both; }