/* JPCASIO — tokens.css (namespaced under .jp; source: design_files/styles.css) */
:root {
  /* warm ivory paper + warm near-black ink (Japanese craft) */
  --ink:        #221d18;
  --ink-2:      #5d544a;
  --ink-3:      #968c7e;
  --paper:      #f8f4ec;
  --paper-2:    #f0eadd;
  --paper-3:    #e7dfce;
  --sand:       #ebe2d2;   /* hero / summary */
  --sand-2:     #ded2bb;
  --line:       #e4ddcd;
  --line-2:     #d3c9b4;
  --black:      #221d18;

  /* signature: vermillion 朱 */
  --acc:        #d8492c;
  --acc-2:      #e4654a;
  --acc-ink:    #97301b;
  --acc-wash:   #f4e2d8;

  /* secondary signals */
  --sale:       #b23a22;   /* discount (harmonizes w/ vermillion) */
  --hit:        #2f6f8f;   /* refined teal-blue */
  --ok:         #3f7d4e;

  --maxw: 1340px;
  --gut: 36px;

  --r-s: 3px;
  --r-m: 6px;
  --r-l: 10px;
  --card-bw: 1px;

  --sh-1: 0 1px 2px rgba(34,29,24,.05);
  --sh-2: 0 14px 34px -16px rgba(34,29,24,.20);
  --sh-3: 0 30px 70px -24px rgba(34,29,24,.30);
}
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: 'Archivo', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
}

.jp {
  box-sizing: border-box;

  /* ============================================================
     JPCASIO v2 — дизайн-система (вдохновлено Tempus: светлый,
     швейцарский, ч/б + жёлтый акцент, заглавные заголовки с «:»)
     ============================================================ */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
  input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--acc); color: var(--ink); }
  /* ---------- type helpers ---------- */
  .mono { font-family: 'IBM Plex Mono', monospace; }
  h1, h2, h3, h4 { font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; }
  /* Tempus-style uppercase heading with ":" divider motif */
  .htitle {
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em;
    font-size: clamp(22px, 2.5vw, 34px); line-height: 1.05;
    display: inline-flex; align-items: center; gap: 13px; flex-wrap: nowrap; white-space: nowrap;
  }
  .htitle .sep { color: var(--acc); font-weight: 900; margin: 0 -2px; }
  .eyebrow {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  }
  .display {
    font-weight: 900; text-transform: uppercase;
    font-size: clamp(34px, 5vw, 60px); line-height: 0.96; letter-spacing: -0.02em;
  }
  /* ---------- layout ---------- */
  .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
  .flex { display: flex; }
  .between { justify-content: space-between; }
  .center { align-items: center; }
  .section { padding: 70px 0; }
  .section-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 34px; text-align: center; }
  .section-head.ctr { flex-direction: column; }
  .seemore { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em; color: var(--ink-2); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color .15s, border-color .15s; }
  .seemore:hover { color: var(--ink); border-color: var(--ink); }
  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    height: 50px; padding: 0 26px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--r-m);
    transition: transform .12s, background .16s, color .16s, border-color .16s; white-space: nowrap;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--ink); color: #fff; }
  .btn-primary:hover { background: #000; }
  .btn-acc { background: var(--acc); color: #fff; }
  .btn-acc:hover { background: var(--acc-2); }
  .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-light { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); }
  .btn-light:hover { border-color: var(--ink); }
  .btn-sm { height: 40px; padding: 0 16px; font-size: 12px; }
  .btn-lg { height: 56px; padding: 0 32px; font-size: 14px; }
  .btn-block { width: 100%; }
  /* ---------- tags / badges ---------- */
  .tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px;
    border-radius: var(--r-s); background: var(--paper-3); color: var(--ink-2); white-space: nowrap;
  }
  .tag.new { background: var(--ink); color: #fff; }
  .tag.hit { background: var(--hit); color: #fff; }
  .tag.sale { background: var(--acc); color: #fff; }
  .tag.limited { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
  .tag.stock { background: transparent; color: var(--ok); border: 1px solid rgba(31,157,87,.4); }
  /* ---------- placeholder imagery ---------- */
  .ph {
    position: relative; overflow: hidden; background-color: var(--paper-2);
    background-image: repeating-linear-gradient(135deg, rgba(20,20,15,.045) 0 1px, transparent 1px 12px);
    display: flex; align-items: center; justify-content: center;
  }
  .ph::after {
    content: attr(data-label);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); background: rgba(255,255,255,.82); padding: 4px 9px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line);
  }
  .ph.sand { background-color: var(--sand); background-image: repeating-linear-gradient(135deg, rgba(20,20,15,.04) 0 1px, transparent 1px 13px); }
  .ph.dark { background-color: #1b1b16; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px); }
  .ph.dark::after { color: #b9b6ac; background: rgba(20,20,15,.7); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
  /* ---------- inputs ---------- */
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
  .input {
    height: 48px; padding: 0 14px; background: #fff; border: 1.5px solid var(--line-2);
    border-radius: var(--r-m); font-size: 15px; transition: border-color .15s, box-shadow .15s;
  }
  .input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,20,15,.06); }
  /* underline-style field (Tempus checkout) */
  .uline { border: 0; border-bottom: 1.5px solid var(--line-2); border-radius: 0; padding: 0 0 10px; height: 40px; background: transparent; font-size: 16px; }
  .uline:focus { box-shadow: none; border-color: var(--ink); }
  .divider { height: 1px; background: var(--line); border: 0; }
  .spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .muted { color: var(--ink-2); }
  .dim { color: var(--ink-3); }
  .nowrap { white-space: nowrap; }
}