/* Ekigen Global Styles — iLists Platform
   Palette: Ekigen Green + Charcoal Slate
   Primary: #15931B  | Hover: #117717
   Charcoal: #111827 | Body Text: #374151
   Background: #FFFFFF | Success Tint: #EAF7EC
*/

/* ------------------------------
   1) Root tokens & base reset
--------------------------------*/
:root {
  --ekg-primary: #15931B;
  --ekg-primary-700: #117717;
  --ekg-charcoal: #111827;
  --ekg-body: #374151;
  --ekg-bg: #FFFFFF;
  --ekg-bg-dark: #191919;
  --ekg-success-tint: #EAF7EC;
  --ekg-error: #DC3545;
  --ekg-warning: #D97706;
  --ekg-info: #2563EB;

  /* Radii & shadows */
  --ekg-radius: 0.75rem; /* 12px */
  --ekg-radius-lg: 1rem; /* 16px */
  --ekg-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --ekg-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);

  /* Fluid typography scale */
  --ekg-fs-100: clamp(0.875rem, 0.80rem + 0.2vw, 0.95rem); /* small */
  --ekg-fs-200: clamp(1rem, 0.93rem + 0.3vw, 1.0625rem);  /* base */
  --ekg-fs-300: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);/* h6 */
  --ekg-fs-400: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);  /* h5 */
  --ekg-fs-500: clamp(1.5rem, 1.35rem + 0.9vw, 1.875rem); /* h4 */
  --ekg-fs-600: clamp(1.75rem, 1.6rem + 1.1vw, 2.25rem);  /* h3 */
  --ekg-fs-700: clamp(2rem, 1.8rem + 1.5vw, 2.75rem);     /* h2 */
  --ekg-fs-800: clamp(2.25rem, 2rem + 2vw, 3.5rem);       /* h1 */

  /* Line heights */
  --ekg-lh-tight: 1.15;
  --ekg-lh-normal: 1.45;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ekg-bg);
  color: var(--ekg-body);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--ekg-fs-200);
  line-height: var(--ekg-lh-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Dark mode base (toggle via .dark on <html> or <body>) */
.dark body { background: var(--ekg-bg-dark); color: #e5e7eb; }

/* ------------------------------
   2) Responsive container & layout helpers
--------------------------------*/
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px){ .container { max-width: 1024px; } }
@media (min-width: 1280px){ .container { max-width: 1280px; } }
@media (min-width: 1536px){ .container { max-width: 1536px; } }

.section { padding-block: clamp(1.25rem, 1rem + 1.2vw, 2.5rem); }
.card {
  background: #fff;
  border: 1px solid rgba(17,24,39,0.08);
  border-radius: var(--ekg-radius);
  box-shadow: var(--ekg-shadow-sm);
}
.dark .card { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.08); }

/* ------------------------------
   3) Typography scale (fluid)
--------------------------------*/
h1, .h1 { font-size: var(--ekg-fs-800); line-height: var(--ekg-lh-tight); color: var(--ekg-charcoal); }
h2, .h2 { font-size: var(--ekg-fs-700); line-height: var(--ekg-lh-tight); color: var(--ekg-charcoal); }
h3, .h3 { font-size: var(--ekg-fs-600); line-height: var(--ekg-lh-tight); color: var(--ekg-charcoal); }
h4, .h4 { font-size: var(--ekg-fs-500); line-height: var(--ekg-lh-tight); color: var(--ekg-charcoal); }
h5, .h5 { font-size: var(--ekg-fs-400); line-height: var(--ekg-lh-tight); color: var(--ekg-charcoal); }
h6, .h6 { font-size: var(--ekg-fs-300); line-height: var(--ekg-lh-tight); color: var(--ekg-charcoal); }
.dark h1, .dark .h1,
.dark h2, .dark .h2,
.dark h3, .dark .h3,
.dark h4, .dark .h4,
.dark h5, .dark .h5,
.dark h6, .dark .h6 { color: #fff; }

p, .text-base { font-size: var(--ekg-fs-200); }
small, .text-sm { font-size: var(--ekg-fs-100); }

/* Links */
a { color: var(--ekg-primary); text-decoration: none; }
a:hover { color: var(--ekg-primary-700); text-decoration: underline; }

/* ------------------------------
   4) Buttons (primary + ghost)
--------------------------------*/
.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; height: 3rem; padding-inline: 1rem;
  border-radius: var(--ekg-radius);
  border: 1px solid transparent;
  font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ekg-primary) 30%, transparent); }

.btn-primary { background: var(--ekg-primary); color: #fff; }
.btn-primary:hover { background: var(--ekg-primary-700); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost { background: transparent; color: var(--ekg-primary); border-color: color-mix(in srgb, var(--ekg-primary) 25%, transparent); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ekg-primary) 10%, transparent); }

/* ------------------------------
   5) Forms (inputs, selects, textareas)
--------------------------------*/
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea {
  width: 100%; height: 3.5rem; padding: 0.9rem 1rem;
  border-radius: var(--ekg-radius);
  border: 1px solid #D1D5DB; /* gray-300 */
  background: #fff; color: var(--ekg-body);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.dark .input, .dark input[type], .dark select, .dark textarea {
  background: rgba(255,255,255,0.05); color: #e5e7eb; border-color: #4B5563; /* gray-600 */
}
.input::placeholder { color: #9CA3AF; }
.input:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ekg-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ekg-primary) 25%, transparent);
}
.input-error, .has-error .input { border-color: var(--ekg-error); }
.help-text { font-size: var(--ekg-fs-100); color: #6B7280; }
.error-text { font-size: var(--ekg-fs-100); color: var(--ekg-error); }

/* Checkbox/Radio accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ekg-primary); }

/* ------------------------------
   6) High-DPI & motion preferences
--------------------------------*/
/* Prefer crisp fonts and balanced image rendering */
img { image-rendering: auto; }
@supports (image-rendering: -webkit-optimize-contrast) {
  img { image-rendering: -webkit-optimize-contrast; }
}

/* Reduce motion for sensitive users */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------
   7) Utility helpers
--------------------------------*/
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }
.divider { height: 1px; background: rgba(17,24,39,0.08); }
.dark .divider { background: rgba(255,255,255,0.12); }

/* Toast/alert base */
.alert { border-radius: var(--ekg-radius); padding: 0.75rem 1rem; border: 1px solid transparent; }
.alert-success { background: var(--ekg-success-tint); border-color: color-mix(in srgb, var(--ekg-primary) 20%, transparent); color: var(--ekg-charcoal); }
.alert-error { background: #FEE2E2; border-color: #FCA5A5; color: #7F1D1D; }
.alert-warning { background: #FEF3C7; border-color: #FCD34D; color: #7C2D12; }
.alert-info { background: #DBEAFE; border-color: #93C5FD; color: #1E3A8A; }

/* ------------------------------
   8) Optional: background images w/ image-set for retina
--------------------------------*/
/* Example usage: .hero { background-image: image-set(url('/img/hero@1x.jpg') 1x, url('/img/hero@2x.jpg') 2x); } */

/* ------------------------------
   9) Print-friendly basics
--------------------------------*/
@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  a { text-decoration: underline; }
}



/* Keep the auth-guard modal always on top */
.ekigen-modal.ekigen-guard-modal { z-index: 100000 !important; }
.ekigen-backdrop.ekigen-guard-backdrop { z-index: 99999 !important; }
/* Ensure inert works broadly in Safari */
[inert] { pointer-events: none; user-select: none; }