/* Storky design tokens.
   A La Rioja palette: wine red, vine green, ochre, on warm limestone. */
:root {
  --sk-primary:   #7b1e3a;
  --sk-primary-2: #9d2c4e;
  --sk-secondary: #4a6b3a;
  --sk-accent:    #c79a3c;

  --sk-bg-100: #faf7f2;
  --sk-bg-200: #f2ece1;
  --sk-bg-300: #e2d7c5;

  --sk-text:     #2b211d;
  --sk-text-dim: #6d6058;
  --sk-border:   #e0d5c4;

  --sk-ok:   #3f7d54;
  --sk-bad:  #b4472f;

  --sk-font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sk-font-reading: "Literata", Georgia, "Times New Roman", serif;
}

[data-theme="dark"] {
  /* Deep enough to read as Rioja wine rather than bubblegum, light enough to
     stay legible: 4.93:1 against --sk-bg-100 and 4.58:1 against cards, both
     over the 4.5:1 AA line. Don't darken it further without re-checking —
     DaisyUI uses this one token for link text and for filled buttons alike. */
  --sk-primary:   #cf6180;
  --sk-primary-2: #b34a68;
  --sk-secondary: #8fb87a;
  --sk-accent:    #e0bd6f;

  --sk-bg-100: #191412;
  --sk-bg-200: #221b18;
  --sk-bg-300: #322722;

  --sk-text:     #f1e9df;
  --sk-text-dim: #a99c92;
  --sk-border:   #3a2e28;

  --sk-ok:   #74c48f;
  --sk-bad:  #ef8f78;
}

body {
  font-family: var(--sk-font-ui);
  /* A faint terracotta wash at the top, so the page never reads as flat white. */
  background-image:
    radial-gradient(ellipse at 50% -10%, color-mix(in oklab, var(--sk-primary) 12%, transparent) 0%, transparent 55%);
  background-attachment: fixed;
}

h1, h2, h3, .display { letter-spacing: -0.015em; }

.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sk-text-dim);
}

/* --- Reading surface -------------------------------------------------- */
.prose-es {
  font-family: var(--sk-font-reading);
  font-size: 1.15rem;
  line-height: 1.85;
}
.prose-es p { margin-bottom: 1.1em; }

/* A tappable word. Kept as a button so it works with a keyboard too. */
.w {
  display: inline;
  border: 0;
  padding: 0 1px;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 3px;
  border-bottom: 1.5px solid transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.w:hover, .w:focus-visible {
  background: color-mix(in oklab, var(--sk-accent) 26%, transparent);
  outline: none;
}
.w.known {
  border-bottom-color: color-mix(in oklab, var(--sk-secondary) 60%, transparent);
}
.w.just-saved {
  background: color-mix(in oklab, var(--sk-secondary) 30%, transparent);
}

/* --- Lesson body ------------------------------------------------------ */
.lesson-body { font-size: 1.02rem; line-height: 1.75; }
.lesson-body p { margin: 0 0 1em; }
.lesson-body h3 { font-weight: 700; margin: 1.6em 0 .5em; font-size: 1.05rem; }
.lesson-body ul { margin: 0 0 1em 1.1em; list-style: disc; }
.lesson-body li { margin-bottom: .35em; }
.lesson-body em.es { font-style: normal; font-weight: 600; color: var(--sk-primary); }
.lesson-body table { width: 100%; margin: 0 0 1.2em; font-size: .95rem; }
.lesson-body th, .lesson-body td {
  text-align: left; padding: .35em .6em;
  border-bottom: 1px solid var(--sk-border);
}
.lesson-body th { font-weight: 700; color: var(--sk-text-dim); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; }
.lesson-body blockquote {
  border-left: 3px solid var(--sk-accent);
  padding: .1em 0 .1em 1em; margin: 0 0 1.2em;
  color: var(--sk-text-dim);
}

/* --- Bits ------------------------------------------------------------- */
.streak-pill {
  background: linear-gradient(135deg, var(--sk-primary), var(--sk-primary-2));
  color: #fff;
}
.answer-input { font-size: 1.1rem; }
.tap-target { min-height: 44px; }

/* The bottom tab bar owns the last 4.5rem on small screens. */
@media (max-width: 767px) {
  main { padding-bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- django-allauth forms ---------------------------------------------
   allauth renders its fields with Django's plain `form.as_p`, so there is no
   hook for DaisyUI classes. Styling them by descendant selector keeps the
   account pages looking like the rest of the app without pulling in
   widget-tweaks or subclassing every allauth form. */
.sk-allauth-form p { margin-bottom: .9rem; }
.sk-allauth-form label { display: block; font-size: .85rem; margin-bottom: .25rem; }
.sk-allauth-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.sk-allauth-form select,
.sk-allauth-form textarea {
  display: block;
  width: 100%;
  padding: .55rem .75rem;
  font: inherit;
  color: var(--sk-text);
  background: var(--sk-bg-100);
  border: 1px solid var(--sk-border);
  border-radius: .6rem;
}
.sk-allauth-form input:focus, .sk-allauth-form select:focus, .sk-allauth-form textarea:focus {
  outline: 2px solid color-mix(in oklab, var(--sk-primary) 55%, transparent);
  outline-offset: 1px;
}
.sk-allauth-form .errorlist { list-style: none; margin: 0 0 .4rem; padding: 0;
  font-size: .85rem; color: var(--sk-bad); }
.sk-allauth-form .helptext { display: block; margin-top: .25rem;
  font-size: .78rem; color: var(--sk-text-dim); }

/* --- Form fields --------------------------------------------------------
   DaisyUI 5 dropped `form-control` and `label-text` (they were v4 classes and
   are simply absent from the stylesheet, so they silently do nothing). These
   are ours: `.field` stacks a caption above its control, which is what every
   labelled input in the app expects. */
.field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}
.field > .label-text { margin-bottom: 0; }
.label-text {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--sk-text-dim);
}