/* =========================================================
   CounselExpert (JEE/BITSAT counselling) — warm hybrid theme
   Overrides the base design-system tokens to a warmer palette
   while preserving every name, rhythm, and component shape.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* === Warm palette overrides === */
  --color-primary:           #B8541A;    /* terracotta — single warm accent */
  --color-primary-active:    #973F0F;
  --color-primary-soft:      #F4E6D8;
  --color-primary-disabled:  #D9C4B0;

  --color-accent-yellow:     #C99A3F;

  --color-canvas:               #FAF8F3;
  --color-surface-soft:         #F3EFE6;
  --color-surface-strong:       #EBE5D8;
  --color-surface-dark:         #1A1814;
  --color-surface-dark-elevated:#272320;

  --color-hairline:       #E8E1D2;
  --color-hairline-soft:  #F0EBDF;

  --color-ink:          #1A1814;
  --color-body:         #6B5F4F;
  --color-body-strong:  #1A1814;
  --color-muted:        #9A8E7A;
  --color-muted-soft:   #BCB1A0;
  --color-on-primary:   #FAF8F3;
  --color-on-dark:      #F7F2E8;
  --color-on-dark-soft: #A89C88;

  --color-positive: #4F7C5A;
  --color-critical: #B84747;

  /* === Display now uses Inter as the system specifies,
         with a serif italic available for editorial accent === */
  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --font-serif:   'Newsreader', 'Times New Roman', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* === Dark mode === */
html[data-theme="dark"] {
  --color-canvas:               #16140F;
  --color-surface-soft:         #1F1C16;
  --color-surface-strong:       #2A2620;
  --color-surface-dark:         #0E0C0A;
  --color-surface-dark-elevated:#1F1C16;

  --color-hairline:       #2E2A23;
  --color-hairline-soft:  #25221C;

  --color-ink:          #F2EDE2;
  --color-body:         #B8AE9A;
  --color-body-strong:  #F7F2E8;
  --color-muted:        #8A7F6C;
  --color-muted-soft:   #5E5547;

  --color-primary-soft: #3B2A1C;
}

html, body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

* { box-sizing: border-box; }

/* === Typography utility classes === */
.display-mega { font-family: var(--font-display); font-weight: 400; font-size: 88px; line-height: 0.98; letter-spacing: -2.4px; color: var(--color-ink); }
.display-xl   { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1.0;  letter-spacing: -1.8px; color: var(--color-ink); }
.display-lg   { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1.05; letter-spacing: -1.4px; color: var(--color-ink); }
.display-md   { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1;  letter-spacing: -1.0px; color: var(--color-ink); }
.display-sm   { font-family: var(--font-sans);    font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.6px; color: var(--color-ink); }

.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.title-lg     { font-family: var(--font-sans); font-weight: 500; font-size: 26px; line-height: 1.2;  letter-spacing: -0.4px; color: var(--color-ink); }
.title-md     { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 1.33; color: var(--color-ink); }
.title-sm     { font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.3;  color: var(--color-ink); }

.body-lg      { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.55; color: var(--color-body); }
.body-md      { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--color-body); }
.body-sm      { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--color-body); }
.caption      { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.5;  color: var(--color-muted); }
.eyebrow      { font-family: var(--font-sans); font-weight: 600; font-size: 11px; line-height: 1;    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.eyebrow-ink  { font-family: var(--font-sans); font-weight: 600; font-size: 11px; line-height: 1;    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); }
.eyebrow-accent { font-family: var(--font-sans); font-weight: 600; font-size: 11px; line-height: 1;  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }

.mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num        { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* === Layout shells === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }
.section   { padding: 96px 0; }
.section-tight { padding: 72px 0; }
.section-soft  { background: var(--color-surface-soft); }
.section-dark  { background: var(--color-surface-dark); color: var(--color-on-dark); }
.section-dark .display-mega, .section-dark .display-xl, .section-dark .display-lg, .section-dark .display-md, .section-dark .display-sm, .section-dark .title-lg, .section-dark .title-md, .section-dark .title-sm { color: var(--color-on-dark); }
.section-dark .body-md, .section-dark .body-sm, .section-dark .body-lg { color: var(--color-on-dark-soft); }
.section-dark .eyebrow { color: var(--color-on-dark-soft); }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease-out, color 160ms ease-out, opacity 160ms ease-out, transform 160ms ease-out;
  text-decoration: none;
}
.btn-primary       { background: var(--color-ink); color: var(--color-canvas); }
.btn-primary:hover { background: var(--color-primary); }
.btn-accent        { background: var(--color-primary); color: var(--color-on-primary); }
.btn-accent:hover  { background: var(--color-primary-active); }
.btn-secondary     { background: transparent; color: var(--color-ink); border: 1px solid var(--color-hairline); }
.btn-secondary:hover { background: var(--color-surface-strong); }
.btn-ghost         { background: transparent; color: var(--color-ink); }
.btn-ghost:hover   { background: var(--color-surface-strong); }
.btn-on-dark-outline { background: transparent; color: var(--color-on-dark); border: 1px solid rgba(247,242,232,0.25); }
.btn-on-dark-outline:hover { background: rgba(247,242,232,0.08); }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13px; }

/* === Cards === */
.card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: 24px;
  padding: 32px;
  transition: box-shadow 200ms ease-out, transform 200ms ease-out, border-color 200ms ease-out;
}
.card-soft { background: var(--color-surface-soft); border-color: transparent; }
.card:hover { box-shadow: 0 4px 24px rgba(26,24,20,0.05); }
.card-flat { padding: 32px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: 24px; }

/* === Badges === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  background: var(--color-surface-strong);
  color: var(--color-ink);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge-accent { background: var(--color-primary-soft); color: var(--color-primary); }
.badge-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 100px; background: currentColor;
}

/* === Inputs === */
.input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.input::placeholder { color: var(--color-muted-soft); }
.input:focus { border-color: var(--color-primary); }
textarea.input { padding: 14px 18px; height: auto; min-height: 110px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A8E7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }

.field-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.field-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 6px;
}

/* === Chip (used in form for multi-select) === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 100px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease-out;
  user-select: none;
}
.chip:hover { border-color: var(--color-muted); }
.chip-selected {
  background: var(--color-ink);
  color: var(--color-canvas);
  border-color: var(--color-ink);
}

/* === Divider === */
.divider { height: 1px; background: var(--color-hairline); border: 0; margin: 32px 0; }

/* === Reset === */
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }

/* === Subtle entrance (transform only — keeps content captureable) === */
@keyframes fadeUp {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}
.fade-up { animation: fadeUp 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) { .fade-up { animation: none; } }

/* === Subtle drift for hero background === */
@keyframes ambientDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
  50%      { transform: translate(20px, -10px) scale(1.08); opacity: 0.7; }
}
.ambient-1 { animation: ambientDrift 18s ease-in-out infinite; }
.ambient-2 { animation: ambientDrift 22s ease-in-out infinite reverse; }

/* === scrollbars on dark === */
html { scroll-behavior: smooth; }

/* === Focus visible (a11y) === */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 6px; }