/* ============================================================
   KA Group — app subdomain, shared base
   Tokens, reset, typography, buttons and form controls. Copied
   from the public site's style.css so the two stay in sync.
   Load this before any page stylesheet (auth.css, app.css).
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; }
input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

/* ---------- Tokens (brand sheet palette) ---------- */
:root {
  /* Surfaces */
  --c-bg:            #FAF6EF;
  --c-bg-card:       #FFFFFF;
  --c-bg-soft:       #F1ECE2;
  --c-bg-sand:       #E8D7BE;

  /* Text */
  --c-text:          #2A2A2A;
  --c-text-2:        #5C6470;
  --c-text-3:        #98A0A8;

  /* Lines & borders */
  --c-border:        #E5DFD4;
  --c-border-strong: #C9C2B4;

  /* Brand accent */
  --c-accent:        #226CCB;
  --c-accent-dark:   #174E94;
  --c-accent-soft:   #D9E7F7;

  /* Secondary palette */
  --c-clay:          #C48A6A;
  --c-sage:          #7FA88E;

  /* Feedback */
  --c-success-bg:    #E8F0EA;
  --c-success-text:  #3D5A48;
  --c-warn-bg:       #FBEFD7;
  --c-warn-text:     #6B4520;

  /* Typography */
  --font-serif: 'Fraunces', 'Charter', Georgia, serif;
  --font-sans:  'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Geometry */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(42, 42, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(42, 42, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(42, 42, 42, 0.08);

  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  240ms cubic-bezier(0.4, 0, 0.2, 1);

  --pad: 1.25rem;
}

/* ---------- Base ---------- */
html { font-size: 17px; }
body {
  font-family: var(--font-sans);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-text);
  font-size: 2.25rem;
  font-variation-settings: 'opsz' 100;
}

a { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast); }
a:hover { color: var(--c-accent-dark); }
a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

::selection { background: var(--c-accent); color: white; }

.eyebrow { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); font-weight: 700; display: block; margin-bottom: 0.875rem; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { height: 40px; width: auto; display: block; }

/* ---------- Buttons (same as public site) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.125rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  border: 1px solid transparent;
  font-family: inherit;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; stroke-width: 1.75; }
.btn-primary { background: var(--c-accent); color: white; }
.btn-primary:hover { background: var(--c-accent-dark); color: white; transform: translateY(-1px); }
.btn-large { padding: 0.875rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.6; pointer-events: none; transform: none; }

/* ---------- Form fields (same as public site) ---------- */
.form-field { margin-bottom: 1rem; }
.form-field label { display: block; font-size: 0.875rem; color: var(--c-text); margin-bottom: 0.375rem; font-weight: 500; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 0.9375rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.form-field input[aria-invalid="true"] { border-color: #8B2424; }

.consent { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--c-text-2); margin: 1.25rem 0 1rem; line-height: 1.5; }
.consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--c-accent); }

.form-status { display: none; padding: 0.75rem 1rem; border-radius: var(--r-sm); font-size: 0.875rem; margin-top: 1rem; }
.form-status.success { display: block; background: var(--c-success-bg); color: var(--c-success-text); border-left: 3px solid var(--c-sage); }
.form-status.error { display: block; background: #FBE4E4; color: #8B2424; border-left: 3px solid #8B2424; }

/* ---------- Headings beyond h1 ---------- */
h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-text);
  font-size: 1.375rem;
  font-variation-settings: 'opsz' 36;
}
h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; }

/* ---------- Buttons: remaining variants from the public site ---------- */
.btn-secondary { background: var(--c-accent-soft); color: var(--c-accent-dark); font-weight: 700; }
.btn-secondary:hover { background: var(--c-accent); color: white; }
.btn-outline { background: transparent; color: var(--c-text); border-color: var(--c-border-strong); }
.btn-outline:hover { background: var(--c-bg-soft); border-color: var(--c-text-2); }
.btn-small { padding: 0.4375rem 0.75rem; font-size: 0.8125rem; }

/* ---------- Avatar (same as the public site's doctor cards) ---------- */
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-dark);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

/* ---------- Visually hidden ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}