/* =========================================================
   ORPETRON TOKENS — scoped to v1 pages only
   Light:  body.orp-v1
   Dark:   body.orp-v1.orp-dark
   ========================================================= */

/* ---------------------- LIGHT ---------------------- */
body.orp-v1 {
  /* neutral / neutral-xx */
  --neutral-10: #ffffff; /* rgb(255,255,255) */
  --neutral-20: #f2f2f2; /* rgb(242,242,242) */
  --neutral-30: #e6e6e6; /* rgb(230,230,230) */
  --neutral-40: #dddddd; /* ~rgb(221,221,221) */
  --neutral-50: #d0d0d0; /* ~rgb(208,208,208) */
  --neutral-60: #b5b5b5; /* ~rgb(181,181,181) */
  --neutral-70: #9b9b9b; /* ~rgb(155,155,155) */
  --neutral-80: #8d8d8d; /* ~rgb(141,141,141) */
  --neutral-90: #737373; /* rgb(115,115,115) */
  --neutral-100: #666666; /* rgb(102,102,102) */
  --neutral-110: #595959; /* rgb(89,89,89) */
  --neutral-120: #404040; /* rgb(64,64,64) */
  --neutral-130: #333333; /* rgb(51,51,51) */
  --neutral-140: #262626; /* rgb(38,38,38) */
  --neutral-150: #101010; /* rgb(16,16,16) */
  --neutral-160: #000000; /* rgb(0,0,0) */

  /* accent / accent-xx  (blue ramp) */
  --accent-10: #cce0ff; /* rgb(204,224,255) */
  --accent-20: #b9d4ff; /* rgb(185,212,255) */
  --accent-30: #a6c8ff; /* rgb(166,200,255) */
  --accent-40: #93bcff; /* rgb(147,188,255) */
  --accent-50: #80b0ff; /* rgb(128,176,255) */
  --accent-60: #6da3ff; /* rgb(109,163,255) */
  --accent-70: #5b97ff; /* rgb(91,151,255) */
  --accent-80: #488bff; /* rgb(72,139,255) */
  --accent-90: #357eff; /* rgb(53,126,255) */
  --accent-100: #0d6efd; /* base */
  --accent-110: #0c63e6;
  --accent-120: #0a58ca;
  --accent-130: #094db0;
  --accent-140: #084296;
  --accent-150: #07377d;
  --accent-160: #062c63;
  --accent-170: #05214a;
  --accent-180: #041731;
  --accent-190: #030e1f;
  --accent-200: #020911;
  --accent-210: #01060a;

  /* function / function-xx */
  --function-10: #0076ce; /* primary/action */
  --function-20: #e7203a; /* danger/error  */

  /* shadows / shadow-xx (use with box-shadow) */
  --shadow-10: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-20: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-30: 0 6px 12px rgba(0, 0, 0, 0.12);
  --shadow-40: 0 12px 24px rgba(0, 0, 0, 0.14);
  --shadow-50: 0 24px 48px rgba(0, 0, 0, 0.16);

  /* semantic aliases (optional) */
  --bg: var(--neutral-10);
  --surface: var(--neutral-20);
  --text: var(--neutral-160);
  --muted: var(--neutral-100);
  --border: var(--neutral-30);
  --accent: var(--accent-100);
}

/* ---------------------- DARK ---------------------- */
  body.orp-v1.orp-dark {
    /* same overrides you use in body.orp-v1.orp-dark */
    --neutral-10:  #000000;
    --neutral-20:  #191919;
    --neutral-30:  #262626;
    --neutral-40:  #333333;
    --neutral-50:  #404040;
    --neutral-60:  #595959;
    --neutral-70:  #737373;
    --neutral-80:  #8d8d8d;
    --neutral-90:  #9e9e9e;
    --neutral-100: #b3b3b3;
    --neutral-110: #c7c7c7;
    --neutral-120: #d9d9d9;
    --neutral-130: #e6e6e6;
    --neutral-140: #eeeeee;
    --neutral-150: #f6f6f6;
    --neutral-160: #ffffff;

    --accent-10:  #0b1a33;
    --accent-20:  #0f2447;
    --accent-30:  #13305f;
    --accent-40:  #163b77;
    --accent-50:  #1a4690;
    --accent-60:  #1e52aa;
    --accent-70:  #225ec4;
    --accent-80:  #276ade;
    --accent-90:  #2c76f8;
    --accent-100: #4d86ff;
    --accent-110: #6a97ff;
    --accent-120: #86a9ff;
    --accent-130: #a2bbff;
    --accent-140: #bdccff;
    --accent-150: #d2dbff;
    --accent-160: #e4eaff;
    --accent-170: #eef3ff;
    --accent-180: #f5f7ff;
    --accent-190: #f8faff;
    --accent-200: #fbfcff;
    --accent-210: #ffffff;

    --function-10: #0091e6;
    --function-20: #e7203a;

    --shadow-10:  0 1px 2px rgba(0,0,0,.30);
    --shadow-20:  0 2px 6px rgba(0,0,0,.35);
    --shadow-30:  0 6px 12px rgba(0,0,0,.40);
    --shadow-40:  0 12px 24px rgba(0,0,0,.45);
    --shadow-50:  0 24px 48px rgba(0,0,0,.50);

    --bg:      var(--neutral-10);
    --surface: var(--neutral-20);
    --text:    var(--neutral-160);
    --muted:   var(--neutral-110);
    --border:  var(--neutral-40);
    --accent:  var(--accent-100);
  }

/* AUTO: server adds .orp-auto; CSS flips to dark only when OS prefers dark */
@media (prefers-color-scheme: dark) {
  body.orp-v1.orp-auto {
    --neutral-10:  #000000;
    --neutral-20:  #191919;
    --neutral-30:  #262626;
    --neutral-40:  #333333;
    --neutral-50:  #404040;
    --neutral-60:  #595959;
    --neutral-70:  #737373;
    --neutral-80:  #8d8d8d;
    --neutral-90:  #9e9e9e;
    --neutral-100: #b3b3b3;
    --neutral-110: #c7c7c7;
    --neutral-120: #d9d9d9;
    --neutral-130: #e6e6e6;
    --neutral-140: #eeeeee;
    --neutral-150: #f6f6f6;
    --neutral-160: #ffffff;

    --accent-10:  #0b1a33;
    --accent-20:  #0f2447;
    --accent-30:  #13305f;
    --accent-40:  #163b77;
    --accent-50:  #1a4690;
    --accent-60:  #1e52aa;
    --accent-70:  #225ec4;
    --accent-80:  #276ade;
    --accent-90:  #2c76f8;
    --accent-100: #4d86ff;
    --accent-110: #6a97ff;
    --accent-120: #86a9ff;
    --accent-130: #a2bbff;
    --accent-140: #bdccff;
    --accent-150: #d2dbff;
    --accent-160: #e4eaff;
    --accent-170: #eef3ff;
    --accent-180: #f5f7ff;
    --accent-190: #f8faff;
    --accent-200: #fbfcff;
    --accent-210: #ffffff;

    --function-10: #0091e6;
    --function-20: #e7203a;

    --shadow-10: 0 1px 2px rgba(0,0,0,.30);
    --shadow-20: 0 2px 6px rgba(0,0,0,.35);
    --shadow-30: 0 6px 12px rgba(0,0,0,.40);
    --shadow-40: 0 12px 24px rgba(0,0,0,.45);
    --shadow-50: 0 24px 48px rgba(0,0,0,.50);

    --bg:      var(--neutral-10);
    --surface: var(--neutral-20);
    --text:    var(--neutral-160);
    --muted:   var(--neutral-110);
    --border:  var(--neutral-40);
    --accent:  var(--accent-100);
  }
}

body.orp-v1 { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
body.orp-v1 .orp-container { max-width: calc(100% - 64px); margin: 0 auto; padding: 0 1rem; }
body.orp-v1 .orp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow-10);
}
body.orp-v1 .orp-card__title { margin: 0 0 .5rem; font-weight: 700; }
body.orp-v1 .orp-card__meta { color: var(--muted); font-size: .9rem; }




/* ===== Toolbar (title + theme buttons) ===== */
body.orp-v1 .orp-v1-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem;
}
body.orp-v1 .orp-v1-title{ margin:0; font-size:clamp(1.25rem,1rem+1vw,1.8rem); font-weight:800; }
body.orp-v1 .orp-theme-toggle{ display:flex; gap:.5rem; }
body.orp-v1 .orp-toggle{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:.45rem .75rem; border-radius:999px; cursor:pointer; box-shadow:var(--shadow-10);
}
body.orp-v1 .orp-toggle:hover{ filter:brightness(1.05); }

/* ===== Website card layout ===== */
body.orp-v1 .orp-grid--cards{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
}

/* media */
body.orp-v1 .orp-card--website .orp-card__media{ position:relative; border-radius:16px; overflow:hidden; background:var(--surface); }
body.orp-v1 .orp-card--website .orp-card__img{
  width:100%; height:auto; display:block;
  transition:transform .35s ease, filter .35s ease;
  transform:translateZ(0);
}
/* actions (hidden by default) */
body.orp-v1 .orp-card--website .orp-card__actions{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.6rem;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
body.orp-v1 .orp-action{
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center;
  background:#fff; /* readable on both modes */
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
body.orp-v1.orp-dark .orp-action{ background:var(--neutral-160); border-color:rgba(255,255,255,.12); box-shadow:0 6px 16px rgba(0,0,0,.5); }
body.orp-v1 .orp-action svg{ fill:var(--neutral-130); }
body.orp-v1.orp-dark .orp-action svg{ fill:var(--neutral-30); }
body.orp-v1 .orp-action:hover{ transform:translateY(-1px); }

/* hover state: image desaturated + actions visible */
@media (hover:hover){
  body.orp-v1 .orp-card--website:hover .orp-card__img{
    filter: grayscale(1) contrast(1.1) brightness(.95);
    transform: scale(1.01);
  }
  body.orp-v1 .orp-card--website:hover .orp-card__actions{
    opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0);
  }
}

/* meta row under image */
body.orp-v1 .orp-card--website .orp-card__metaRow{
  display:grid; grid-template-columns:44px 1fr; gap:.8rem;
  align-items:start; padding:.9rem .2rem 0;
}
body.orp-v1 .orp-avatar{ width:44px; height:44px; border-radius:999px; object-fit:cover; border:1px solid var(--border); }

body.orp-v1 .orp-card__title{
  margin:.1rem 0 .25rem; font-size:clamp(1.05rem, .9rem + .6vw, 1.4rem); font-weight:800; line-height:1.15;
}
body.orp-v1 .orp-card__title a{ color:var(--text); text-decoration:none; }
body.orp-v1 .orp-card__title a:hover{ text-decoration:underline; }

body.orp-v1 .orp-badge{
  display:inline-block; margin-left:.5rem; font-size:.8rem; line-height:1;
  padding:.3rem .5rem; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--text);
}
body.orp-v1 .orp-byline{ margin:.15rem 0 .35rem; color:var(--muted); }
body.orp-v1 .orp-tags{ margin:0; color:var(--muted); }
body.orp-v1 .orp-tags a{ color:inherit; text-decoration:none; }
body.orp-v1 .orp-tags a:hover{ text-decoration:underline; }

/* pagination from before (kept) */
body.orp-v1 .orp-pagination{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem; }
body.orp-v1 .orp-pagination a,
body.orp-v1 .orp-pagination span{
  display:inline-block; padding:.45rem .7rem; border-radius:8px; border:1px solid var(--border);
  text-decoration:none; color:var(--text); background:var(--surface);
}
body.orp-v1 .orp-pagination .current{ background:var(--accent); color:#fff; border-color:transparent; }
body.orp-v1 a{
	color:var(--neutral-160)
}