/* =========================================================
   Oxford 3000 — paper card design system
   Warm paper cream + ink black + faded library red accent
   ========================================================= */

:root {
  /* Warm paper palette */
  --paper-0: #f7f1e3;        /* page bg, aged cream */
  --paper-1: #efe6d2;        /* card bg */
  --paper-2: #e6dcc4;        /* card bg deeper */
  --paper-shadow: #c9bd9c;
  --rule: #b8a981;           /* hairline rule */
  --rule-soft: #d8cca9;

  --ink: #1d1a14;            /* ink black */
  --ink-soft: #43402f;       /* secondary ink */
  --ink-faded: #7a7259;      /* tertiary */
  --ink-ghost: #a89f80;

  /* Stamps & accents */
  --red-stamp: #a8341f;      /* faded library red */
  --red-soft: #c45a45;
  --green-ok: #5a7339;       /* moss green pencil */
  --blue-mark: #2f4a6b;      /* navy ink */
  --gold: #b08a3e;

  /* CEFR colors (paper-tinted) */
  --c-a1: #5a7339;
  --c-a2: #b08a3e;
  --c-b1: #c45a45;
  --c-b2: #8b3a8e;

  /* Type */
  --font-serif: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --font-hand:  'Caveat', 'Bradley Hand', cursive;

  --r-card: 4px;
  --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -10px rgba(60,40,10,0.25), 0 2px 6px rgba(60,40,10,0.08);
  --shadow-deep: 0 1px 0 rgba(0,0,0,0.05), 0 18px 40px -12px rgba(60,40,10,0.35), 0 6px 14px rgba(60,40,10,0.12);
}

/* Cool paper variant */
html[data-tone="cool"] {
  --paper-0: #eff1ee;
  --paper-1: #e7e9e4;
  --paper-2: #dde0d9;
  --rule: #a4ada1;
  --rule-soft: #c9d0c5;
  --ink: #1a1c1d;
  --ink-soft: #383d3e;
  --ink-faded: #6c7470;
  --ink-ghost: #9da59f;
  --red-stamp: #8b3a35;
  --gold: #8a7a3d;
}

/* Night / dark paper variant */
html[data-tone="night"] {
  --paper-0: #1d1c1a;
  --paper-1: #26241f;
  --paper-2: #2c2a24;
  --rule: #4a4538;
  --rule-soft: #38362d;
  --ink: #efe6d2;
  --ink-soft: #c8bfa9;
  --ink-faded: #8e8770;
  --ink-ghost: #5a5448;
  --red-stamp: #c47a5e;
  --green-ok: #98ad6f;
  --blue-mark: #88a8c8;
  --gold: #d4b06a;
  --c-a1: #98ad6f;
  --c-a2: #d4b06a;
  --c-b1: #c47a5e;
  --c-b2: #c08bbb;
  --shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -10px rgba(0,0,0,0.7);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper-0);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "kern";
}

/* Paper grain — applied to body and cards */
.paper-grain {
  position: relative;
}
.paper-grain::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,90,40,0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(60,40,10,0.04) 0%, transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.25  0 0 0 0 0.10  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, auto, 160px 160px;
  opacity: 0.9;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Foxing / age spots — corner stains */
.foxed::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(ellipse 60px 40px at 6% 8%, rgba(140,90,40,0.10), transparent 70%),
    radial-gradient(ellipse 80px 50px at 96% 92%, rgba(140,90,40,0.08), transparent 70%),
    radial-gradient(ellipse 30px 20px at 90% 10%, rgba(120,80,30,0.08), transparent 70%);
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Headlines */
.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-sans); }
.hand  { font-family: var(--font-hand); }
.mono  { font-family: var(--font-mono); }

/* Hairline rule — dictionary-style double */
.rule-double {
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  height: 4px;
  background: transparent;
}
.rule-thin { border:0; border-top: 1px solid var(--rule-soft); }

/* Generic paper card */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--paper-1) 0%, var(--paper-2) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* Stamp — like a library date stamp */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 4px 10px;
  border: 1.5px solid currentColor;
  color: var(--red-stamp);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transform: rotate(-1.5deg);
  background: transparent;
  border-radius: 2px;
  position: relative;
}
.stamp::before, .stamp::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  opacity: 0.4;
  pointer-events: none;
}
.stamp::after { transform: translate(1.5px, 1px); opacity: 0.2; }

/* Buttons */
.btn {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 10px 18px;
  border-radius: 3px;
  border: 1px solid var(--ink);
  background: var(--paper-1);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
  box-shadow: 2px 2px 0 var(--ink);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper-0); }
.btn.ghost { border-color: var(--rule); box-shadow: none; background: transparent; }
.btn.ghost:hover { background: rgba(0,0,0,0.04); transform: none; box-shadow: none; }

/* CEFR pill */
.cefr {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
  vertical-align: middle;
}
.cefr.a1 { color: var(--c-a1); }
.cefr.a2 { color: var(--c-a2); }
.cefr.b1 { color: var(--c-b1); }
.cefr.b2 { color: var(--c-b2); }

/* Phonetic */
.phon {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
}

/* Annotation tape */
.tape {
  display: inline-block;
  background: rgba(176, 138, 62, 0.18);
  padding: 1px 6px;
  border-radius: 1px;
  box-shadow: 0 0 0 0.5px rgba(176, 138, 62, 0.4);
}

/* Pencil underline */
.pencil-underline {
  background-image: linear-gradient(transparent 60%, rgba(168, 52, 31, 0.25) 60%);
}

/* Marginalia */
.marginalia {
  font-family: var(--font-hand);
  color: var(--red-stamp);
  font-size: 22px;
  line-height: 1.1;
  transform: rotate(-2deg);
  opacity: 0.85;
}

/* Focus ring */
:focus-visible { outline: 2px solid var(--blue-mark); outline-offset: 2px; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; border: 2px solid var(--paper-0); }