/* Kodumarket · design tokens */

:root {
  /* Primaries */
  --km-blue-900: #061F4D;
  --km-blue-800: #0B3D91;   /* brand blue */
  --km-blue-700: #124FB3;
  --km-blue-500: #2E86DE;
  --km-blue-100: #E6EEF9;
  --km-blue-50:  #F3F7FC;

  --km-green-900: #064E3B;
  --km-green-700: #047857;
  --km-green-600: #059669;  /* brand green */
  --km-green-500: #10B981;
  --km-green-100: #D1FAE5;
  --km-green-50:  #ECFDF5;

  /* Gradient */
  --km-grad: linear-gradient(135deg, #0B3D91 0%, #0E6AA8 45%, #059669 100%);
  --km-grad-soft: linear-gradient(135deg, #0B3D91 0%, #059669 100%);
  --km-grad-mesh:
    radial-gradient(1200px 600px at 10% 10%, rgba(11,61,145,.95), transparent 60%),
    radial-gradient(900px 700px at 90% 80%, rgba(5,150,105,.9), transparent 60%),
    linear-gradient(135deg, #0B3D91, #059669);

  /* Ink / surface */
  --km-ink:        #0A1628;
  --km-ink-2:      #1E2A3C;
  --km-ink-3:      #4A5568;
  --km-ink-4:      #8A94A6;
  --km-line:       #E4E8EE;
  --km-line-soft:  #EEF1F5;
  --km-surface:    #FFFFFF;
  --km-surface-2:  #F7F9FC;
  --km-surface-3:  #F0F3F7;

  /* Accents */
  --km-price:      #0B3D91;
  --km-sale:       #DC2626;
  --km-stock:      #059669;

  /* Radii / shadow */
  --km-r-xs: 6px;
  --km-r-sm: 10px;
  --km-r-md: 14px;
  --km-r-lg: 20px;
  --km-r-xl: 28px;
  --km-shadow-sm: 0 1px 2px rgba(10,22,40,.06), 0 1px 1px rgba(10,22,40,.04);
  --km-shadow-md: 0 8px 24px -8px rgba(10,22,40,.12), 0 2px 4px rgba(10,22,40,.05);
  --km-shadow-lg: 0 24px 60px -20px rgba(10,22,40,.25), 0 4px 10px rgba(10,22,40,.06);
  --km-shadow-blue: 0 16px 40px -12px rgba(11,61,145,.35);
  --km-shadow-green: 0 16px 40px -12px rgba(5,150,105,.35);
}

[data-theme="dark"] {
  --km-ink:        #F2F6FB;
  --km-ink-2:      #D7DEE8;
  --km-ink-3:      #A8B3C2;
  --km-ink-4:      #6A7688;
  --km-line:       #1E2A3C;
  --km-line-soft:  #15202F;
  --km-surface:    #0B1220;
  --km-surface-2:  #0F1A2C;
  --km-surface-3:  #142238;
  --km-blue-100:   #0F2547;
  --km-blue-50:    #0B1A33;
  --km-green-100:  #0A3A2A;
  --km-green-50:   #082A20;
  --km-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --km-shadow-md:  0 8px 24px -8px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.3);
  --km-shadow-lg:  0 24px 60px -20px rgba(0,0,0,.8);
}

/* Fonts */
.km-sans  { font-family: "Geist", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; }
.km-mono  { font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }
.km-serif { font-family: "Instrument Serif", "Times New Roman", serif; }

/* Base resets inside artboards */
.km-root {
  font-family: "Geist", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--km-ink);
  background: var(--km-surface);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.km-root *, .km-root *::before, .km-root *::after { box-sizing: border-box; }
.km-root button { font-family: inherit; color: inherit; }

/* Shared utility */
.km-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--km-blue-50);
  color: var(--km-blue-800);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase;
}
.km-chip-green { background: var(--km-green-50); color: var(--km-green-700); }
.km-chip-sale  { background: #FEE2E2; color: #B91C1C; }

.km-dot {
  width: 6px; height: 6px; border-radius: 999px; display: inline-block; background: currentColor;
}

.km-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: var(--km-r-md);
  border: 1px solid transparent;
  font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, background .15s;
  white-space: nowrap;
}
.km-btn:active { transform: translateY(1px); }
.km-btn-primary { background: var(--km-green-600); color: #fff; }
.km-btn-primary:hover { background: var(--km-green-700); box-shadow: var(--km-shadow-green); }
.km-btn-blue { background: var(--km-blue-800); color: #fff; }
.km-btn-blue:hover { background: var(--km-blue-900); }
.km-btn-ghost { background: transparent; color: var(--km-ink); border-color: var(--km-line); }
.km-btn-ghost:hover { background: var(--km-surface-2); }
.km-btn-grad { background: var(--km-grad-soft); color: #fff; }
.km-btn-grad:hover { box-shadow: var(--km-shadow-blue); }

/* Product image placeholders (stripe tape) */
.km-img-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(11,61,145,.05) 0 8px, rgba(11,61,145,0) 8px 16px),
    var(--km-surface-2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--km-ink-4);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.km-img-placeholder.green {
  background:
    repeating-linear-gradient(135deg, rgba(5,150,105,.07) 0 8px, rgba(5,150,105,0) 8px 16px),
    var(--km-green-50);
}
.km-img-placeholder.grad {
  background: var(--km-grad-mesh);
  color: rgba(255,255,255,.85);
}

/* Scrollbar inside the mock frames */
.km-scroll::-webkit-scrollbar { width: 0; height: 0; }