/* ===========================================================
   KIMCHI MART — Unified Design Tokens (2026 modern SaaS tone)
   Inject this file FIRST in every page, before page-specific CSS.
   Set --primary in body class (kmd-red / kmd-green) for accent shift.
   =========================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  /* Brand */
  --kmd-primary:#1a5c3a;
  --kmd-primary-2:#16a34a;
  --kmd-primary-light:#dcfce7;
  --kmd-red:#dc2626;
  --kmd-red-dark:#991b1b;
  --kmd-red-light:#fef2f2;

  /* Surfaces — warm cream gradient */
  --kmd-bg:#fffaf5;
  --kmd-bg-end:#faf6f1;
  --kmd-surface:#ffffff;

  /* Borders */
  --kmd-border:rgba(15,23,42,.06);
  --kmd-border-strong:rgba(15,23,42,.10);

  /* Text */
  --kmd-text-1:#0f172a;
  --kmd-text-2:#475569;
  --kmd-text-3:#94a3b8;

  /* Shadows */
  --kmd-shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.04);
  --kmd-shadow-md:0 4px 14px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.05);
  --kmd-shadow-lg:0 18px 40px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.04);

  /* Radius */
  --kmd-radius:14px;
  --kmd-radius-lg:18px;
}

/* === Body / fonts === */
html.kmd, body.kmd{
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
    'Inter','Segoe UI','Malgun Gothic',sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em;
  font-feature-settings:'ss01','tnum';
}
body.kmd{
  background:linear-gradient(180deg,var(--kmd-bg) 0%,var(--kmd-bg-end) 100%) !important;
  background-attachment:fixed;
  color:var(--kmd-text-1);
}

/* === Helper classes — pages can opt-in === */
.kmd-card{
  background:var(--kmd-surface);
  border:1px solid var(--kmd-border);
  border-radius:var(--kmd-radius);
  box-shadow:var(--kmd-shadow-sm);
  transition:box-shadow .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.kmd-card:hover{box-shadow:var(--kmd-shadow-md)}
.kmd-card-lift:hover{transform:translateY(-2px)}

.kmd-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:#f5f5f7;border:1px solid var(--kmd-border);
  border-radius:18px;padding:5px 12px;
  font-size:.74em;font-weight:700;color:var(--kmd-text-2);
}

.kmd-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--kmd-surface);border:1.5px solid var(--kmd-border-strong);
  color:var(--kmd-text-1);border-radius:11px;padding:9px 16px;
  font-size:.86em;font-weight:700;cursor:pointer;
  transition:all .15s;font-family:inherit;letter-spacing:-.005em;
}
.kmd-btn:hover{border-color:transparent;box-shadow:var(--kmd-shadow-md);transform:translateY(-1px)}
.kmd-btn-primary{
  background:linear-gradient(135deg,var(--kmd-primary),var(--kmd-primary-2));
  color:#fff;border-color:transparent;
}
.kmd-btn-primary:hover{box-shadow:0 6px 18px rgba(22,163,74,.30)}
.kmd-btn-red{
  background:linear-gradient(135deg,var(--kmd-red-dark),var(--kmd-red));
  color:#fff;border-color:transparent;
}
.kmd-btn-red:hover{box-shadow:0 6px 18px rgba(220,38,38,.28)}

/* === Better focus rings (accessibility) === */
.kmd input:focus,.kmd select:focus,.kmd textarea:focus,
body.kmd input:focus,body.kmd select:focus,body.kmd textarea:focus{
  outline:0;
  box-shadow:0 0 0 4px rgba(22,163,74,.10);
  border-color:var(--kmd-primary) !important;
}

/* === Brand logo (replaces K text in topbars across pages) === */
.brand-logo{
  height:30px;
  width:auto;
  max-width:130px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}
.topbar .brand .brand-logo,
.brand > .brand-logo{
  height:32px;
  max-width:135px;
}
.brand:has(.brand-logo){
  gap:8px !important;
}

/* === Reduced motion === */
@media(prefers-reduced-motion:reduce){
  body.kmd *{
    animation:none !important;
    transition:none !important;
  }
}