/* =============================================================
   Kepek Design System — Tokens + Base Styles
   1:1 port of kepek-design-system/colors_and_type.css
   ============================================================= */

/* Fonts: Geist (display + body), Geist Mono, Instrument Serif (editorial accent).
   Loaded via Google Fonts. To go offline, drop woff2 files into
   ./fonts/ and replace this @import with @font-face declarations. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* =============================================================
   Tokens
   ============================================================= */
:root {
  /* ---------- Color: Mint (primary brand) ---------- */
  --mint-50:  #ECF4F5;
  --mint-100: #D2E5E7;
  --mint-200: #A9CDD2;
  --mint-300: #6FAEB5;
  --mint-400: #48999E;
  --mint-500: #2A8590;  /* primary */
  --mint-600: #1F6D77;
  --mint-700: #185058;
  --mint-800: #0F3B43;

  /* ---------- Color: Teal (accent) ---------- */
  --teal-50:  #ECF4F5;
  --teal-100: #D2E5E7;
  --teal-200: #A9CDD2;
  --teal-300: #6FAEB5;
  --teal-500: #2A8590;
  --teal-600: #1F6D77;
  --teal-700: #185058;

  /* ---------- Color: Warm neutrals ---------- */
  --white:    #FFFFFF;
  --paper:    #FAFAF7;
  --mist:     #F4F4EF;
  --cloud:    #ECECE5;
  --stone:    #E4E4DC;
  --pebble:   #D4D4CA;
  --slate:    #A8A89F;
  --graphite: #6B6E68;
  --ash:      #4A4D48;
  --ink:      #2A2D29;
  --char:     #1F2421;  /* primary text */
  --black:    #0F1311;

  /* ---------- Color: Status (muted) ---------- */
  --success:        var(--mint-500);
  --success-bg:     var(--mint-50);
  --warn:           #C99A4A;   /* warm amber */
  --warn-bg:        #FAF3E5;
  --warn-fg:        #8A6320;
  --warn-border:    #E8D4A8;
  --danger:         #C97A6A;   /* clay, not red */
  --danger-bg:      #FAEEEA;
  --danger-fg:      #8A4030;
  --danger-border:  #E8C5BC;
  --info:           var(--teal-500);
  --info-bg:        var(--teal-50);

  /* ---------- Semantic colors ---------- */
  --bg-0: var(--white);
  --bg-1: var(--paper);
  --bg-2: var(--mist);
  --bg-3: var(--cloud);

  --fg-1: var(--char);      /* primary text */
  --fg-2: var(--ash);       /* secondary text */
  --fg-3: var(--graphite);  /* muted text / labels */
  --fg-4: var(--slate);     /* placeholders, disabled */

  --border-soft:   var(--stone);
  --border-strong: var(--char);
  --border-mint:   var(--mint-200);

  --accent:        var(--mint-500);
  --accent-hover:  var(--mint-600);
  --accent-press:  var(--mint-700);
  --accent-bg:     var(--mint-50);
  --accent-border: var(--mint-300);

  /* ---------- Spacing (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* ---------- Shadows (used sparingly) ---------- */
  --shadow-hover: 0 6px 20px -8px rgba(31, 36, 33, 0.08);
  --shadow-pop:   0 8px 24px -12px rgba(31, 36, 33, 0.12);
  --shadow-lift:  0 16px 48px -16px rgba(31, 36, 33, 0.14);
  --shadow-modal: 0 32px 80px -24px rgba(31, 36, 33, 0.22);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 420ms;

  /* ---------- Type ---------- */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Instrument Serif', Georgia, serif;

  --fs-display:   72px;
  --fs-h1:        56px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-h4:        20px;
  --fs-h5:        17px;
  --fs-body:      17px;
  --fs-body-sm:   15px;
  --fs-caption:   13px;
  --fs-micro:     12px;

  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body:    1.55;
  --lh-tight:   1.3;

  --tr-display: -0.025em;
  --tr-heading: -0.015em;
  --tr-body:    -0.005em;
  --tr-mono:    0;

  /* ---------- Layout ---------- */
  --gutter-mobile:  24px;
  --gutter-desktop: 64px;
  --max-editorial: 720px;
  --max-content:   1200px;
  --max-admin:     1440px;
}

/* Mobile: dial down display sizes */
@media (max-width: 768px) {
  :root {
    --fs-display: 44px;
    --fs-h1:      36px;
    --fs-h2:      28px;
    --fs-h3:      22px;
    --fs-h4:      18px;
  }
}

/* =============================================================
   Reset + base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }

/* =============================================================
   Semantic typography
   ============================================================= */
.t-display, h1.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
}

h1, .t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-display);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
}

h2, .t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
}

h3, .t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
}

h4, .t-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-body);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

h5, .t-h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-tight);
  font-weight: 600;
  color: var(--fg-1);
  margin: 0;
}

p, .t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}

.t-body-sm { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--fg-2); }
.t-caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); }
.t-micro {
  font-size: var(--fs-micro);
  line-height: 1.3;
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.t-mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.t-serif { font-family: var(--font-serif); }

/* Editorial body: used in blog detail */
.prose {
  font-size: 19px;
  line-height: 1.7;
  color: var(--fg-1);
  max-width: var(--max-editorial);
}
.prose p + p { margin-top: 1.2em; }
.prose h2 { margin-top: 2em; margin-bottom: 0.6em; }
.prose h3 { margin-top: 1.6em; margin-bottom: 0.4em; }
.prose a { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 1.2em 0; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 1.2em;
  border-left: 2px solid var(--mint-300);
  color: var(--fg-2);
  font-style: italic;
}
.prose img { border-radius: var(--r-md); margin: 1.6em 0; border: 1px solid var(--border-soft); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-2); padding: 2px 6px; border-radius: var(--r-xs); }

/* =============================================================
   Buttons
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--mint-300);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--char);
  color: var(--white);
  border-color: var(--char);
}
.btn-primary:hover { background: var(--ink); border-color: var(--ink); }
.btn-primary:active { background: var(--black); }

.btn-mint {
  background: var(--mint-500);
  color: var(--white);
  border-color: var(--mint-500);
}
.btn-mint:hover { background: var(--mint-600); border-color: var(--mint-600); }
.btn-mint:active { background: var(--mint-700); }

.btn-secondary {
  background: var(--white);
  color: var(--fg-1);
  border-color: var(--border-soft);
}
.btn-secondary:hover { background: var(--mist); border-color: var(--pebble); }

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: transparent;
}
.btn-ghost:hover { background: rgba(31, 36, 33, 0.04); }

.btn-danger {
  background: var(--white);
  color: var(--danger-fg);
  border-color: var(--danger-border);
}
.btn-danger:hover { background: var(--danger-bg); }

.btn-sm { height: 34px; padding: 0 12px; font-size: var(--fs-caption); border-radius: var(--r-xs); }
.btn-lg { height: 52px; padding: 0 24px; font-size: var(--fs-body); border-radius: var(--r-md); }

.btn[disabled], .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-block { display: flex; width: 100%; }

/* =============================================================
   Cards
   ============================================================= */
.card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.card-interactive {
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-interactive:hover {
  border-color: var(--pebble);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.card-interactive:active { transform: translateY(-1px) scale(0.995); }

.card-feature {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}

.card-mint {
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  border-radius: var(--r-md);
  padding: var(--s-5);
}

/* =============================================================
   Badges, chips, pills
   ============================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--mist);
  color: var(--fg-2);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.badge-mint { background: var(--mint-50); color: var(--mint-700); border-color: var(--mint-200); }
.badge-teal { background: var(--teal-50); color: var(--teal-700); border-color: var(--teal-200); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-border); }
.badge-danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); }
.badge-ai {
  background: var(--char);
  color: var(--mint-200);
  border-color: var(--char);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-full);
  font-size: var(--fs-caption);
  font-weight: 500;
  background: var(--white);
  color: var(--fg-1);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  user-select: none;
}
.chip:hover { background: var(--mist); border-color: var(--pebble); }
.chip-active { background: var(--char); color: var(--white); border-color: var(--char); }
.chip-active:hover { background: var(--ink); border-color: var(--ink); }

/* =============================================================
   Inputs
   ============================================================= */
.input, .textarea, .select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
  background: var(--white);
  color: var(--fg-1);
  font-family: inherit;
  font-size: var(--fs-body-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-4); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--pebble); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--char);
  box-shadow: 0 0 0 3px rgba(143, 197, 168, 0.3);
}
.textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.input-error { border-color: var(--danger); }
.input-error:focus { box-shadow: 0 0 0 3px rgba(201, 122, 106, 0.25); }

.label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--fg-2);
  margin-bottom: 6px;
}

.field { margin-bottom: var(--s-4); }
.field-error { font-size: var(--fs-caption); color: var(--danger-fg); margin-top: 6px; }
.field-help { font-size: var(--fs-caption); color: var(--fg-3); margin-top: 6px; }

/* =============================================================
   Misc utilities
   ============================================================= */
.divider {
  height: 1px;
  background: var(--border-soft);
  border: 0;
  margin: 0;
}
.kbd {
  display: inline-block;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--mist);
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  color: var(--fg-2);
}

/* Scan ring decoration — kepek-specific */
.scan-ring {
  position: relative;
  border-radius: var(--r-full);
  background: radial-gradient(circle at center, var(--mint-50) 0%, transparent 70%);
}
.scan-ring::before, .scan-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--mint-300);
  opacity: 0.5;
  animation: scan-pulse 2.5s var(--ease) infinite;
}
.scan-ring::after { animation-delay: 1.25s; }
@keyframes scan-pulse {
  0%   { transform: scale(0.92); opacity: 0.6; }
  60%  { transform: scale(1.06); opacity: 0; }
  100% { transform: scale(1.1);  opacity: 0; }
}

/* Glass nav */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}