/* ============================================================
   MENCTOR — Lector Brand (orange + navy + warm paper)
   Adapted from Lector Design System
   ============================================================ */

:root {
  /* === CORE TOKENS — Lector palette === */
  --bg:                #FBFAF7;          /* warm paper */
  --canvas:            #FFFFFF;
  --canvas-warm:       #F6F7FA;

  --surface:           #FFFFFF;
  --surface-2:         #F6F7FA;
  --surface-deep:      #FBFAF7;
  --surface-muted:     #EFF1F6;

  --border:            #E7EAF1;
  --border-strong:     #D3D8E2;
  --border-subtle:     #EBEDF3;

  /* === BRAND ACCENT — Lector Orange === */
  --accent:            #F66B0A;
  --accent-light:      #FF8636;
  --accent-cta:        #EE5A00;
  --accent-soft:       #FFF4EC;          /* orange-50 */

  /* Text (Lector ink) */
  --text:              #0E2748;
  --ink:               #0E2748;
  --ink-soft:          #243653;
  --ink-muted:         #5C667C;
  --ink-faint:         #838DA0;
  --text-secondary:    #5C667C;
  --text-on-dark:      #FFFFFF;

  /* Navy secondary (Lector navy) */
  --navy:              #00204D;
  --navy-soft:         #EBF0F7;

  /* Semantic / Risk */
  --health:            #22c55e;          /* healthy green */
  --health-deep:       #16a34a;
  --health-soft:       #E7F6EE;
  --health-tint:       rgba(34,197,94,0.08);
  --health-select:     rgba(34,197,94,0.15);

  --orange:            #F66B0A;
  --orange-deep:       #C44700;
  --orange-soft:       #FFF4EC;

  --coral:             #E5484D;
  --coral-soft:        #FCEBEC;
  --amber:             #F0A800;
  --amber-soft:        #FFF6E0;
  --sky:               #2A6FDB;
  --sky-soft:          #E9F0FC;

  --success:           #1F9D55;
  --warning:           #F0A800;
  --danger:            #E5484D;

  /* Typography — Inter + modern */
  --display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "TWK Everett Mono", monospace;

  /* Type scale (Sui-inspired tight) */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   21px;
  --text-3xl:   28px;
  --text-4xl:   36px;

  --font-regular: 400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;

  --leading-tight: 1.05;
  --leading-snug:  1.15;
  --leading-normal:1.4;
  --leading-relaxed:1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;

  /* Radii — tighter modern */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* Shadows — Lector style (clean, warm) */
  --shadow-card: 0 1px 3px rgba(10,23,48,0.06), 0 1px 2px rgba(10,23,48,0.03);
  --shadow-pop:  0 10px 30px -8px rgba(10,20,40,0.12), 0 4px 6px -4px rgba(10,20,40,0.06);
  --shadow-modal:0 20px 60px -10px rgba(10,20,40,0.18);

  /* Motion — exact Sui */
  --cubic-default: cubic-bezier(0.51, 0, 0.08, 1);
  --duration-default: 0.525s;
  --duration-fast: 0.375s;

  --ease-out:    var(--cubic-default);
  --ease-spring: var(--cubic-default);
  --t-fast:  375ms var(--cubic-default);
  --t-base:  525ms var(--cubic-default);
  --t-slow:  600ms var(--cubic-default);

  /* Legacy spacing (kept for compat) */
  --space-4: 8px;
  --space-8: 16px;
  --space-12:24px;
  --space-16:32px;

  /* Z */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* Base */
html, body, #root {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  background: var(--bg) !important;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
html {
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -0.025em;
  color: var(--text);
}

::selection {
  background: #F66B0A;
  color: #fff;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  letter-spacing: inherit;
  touch-action: manipulation;
}

a { color: inherit; text-decoration: none; }

input, textarea, select {
  font-family: inherit;
  color: inherit;
  accent-color: var(--accent);
}

input::placeholder, textarea::placeholder {
  color: var(--ink-muted);
}

/* Light scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Display titles */
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text);
}

.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Legacy compat vars — Lector */
:root {
  --line: #E7EAF1;
  --line-strong: #D3D8E2;
  --hairline: 1px solid #E7EAF1;
  --material-thick: rgba(255,255,255,0.96);
  --material-thin: rgba(255,255,255,0.92);
  --material-blur: blur(12px);
  --shadow-xs: 0 1px 2px rgba(10,23,48,0.04);
  --shadow-sm: 0 1px 3px rgba(10,23,48,0.06);
  --shadow-md: 0 4px 12px rgba(10,23,48,0.08);
  --shadow-lg: 0 10px 30px rgba(10,20,40,0.12);

  --surface-sage: #F6F7FA;
  --surface-peach: #FFFFFF;
  --surface-mint: #FFFFFF;
  --health-tint: rgba(246,107,10,0.06);
}