/* LiteracyLab AI: the "Notebook" theme, shared by every page.
   One file sets the palette (warm paper, ink and the brand wine), the type (a classic serif for headings, Lexend for
   everything you read or tap, kept because it is built for easy reading) and the shape of cards. Each page still
   defines the variable names it uses; this file loads after them, so one edit here changes the whole site.
   The logo is untouched: the two-letter tiles and the "LiteracyLab AI" wordmark. */

:root{
  --bg: #E9E2D6;
  --bg-elevated: #F2ECE2;
  --surface: #FFFDF8;
  --surface-2: #DCD3C3;
  --border: #B3A793;
  --border-soft: #CFC6B6;
  --ink: #1F1C19;
  --ink-soft: #453F38;
  --ink-faint: #5A5349;
  --accent: #6B2A36;
  --accent-ink: #4A1B25;
  --accent-tint: #E6CFCB;
  --cyan: #6B2A36;
  --cyan-ink: #4A1B25;
  --cyan-tint: #E6CFCB;
  --wine: #6B2A36;
  --wine-ink: #4A1B25;
  --wine-tint: #E6CFCB;
  --gold: #7A5C28;
  --gold-ink: #4F3A14;
  --gold-tint: #E3D5B4;
  --navy-tint: #DCD3C3;
  --good: #2D6A44;
  --good-tint: #D5E4D2;
  --warn: #8F6212;
  --warn-tint: #EBD9AE;
  --bad: #A33A33;
  --bad-tint: #F0D3CE;
  --grid-line: rgba(31,28,25,0.08);
  --on-ink: #FFFDF8;
  --on-solid: #FFFFFF;
  --serif-display: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono-label: "Courier Prime", "Courier New", Courier, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #171513;
    --bg-elevated: #1D1A17;
    --surface: #24211D;
    --surface-2: #2E2A25;
    --border: #5A5349;
    --border-soft: #403B34;
    --ink: #FAF6F0;
    --ink-soft: #D6CEC2;
    --ink-faint: #ADA396;
    --accent: #C4605A;
    --accent-ink: #F2B3AB;
    --accent-tint: #3F2326;
    --cyan: #C4605A;
    --cyan-ink: #F2B3AB;
    --cyan-tint: #3F2326;
    --wine: #C4605A;
    --wine-ink: #F2B3AB;
    --wine-tint: #3F2326;
    --gold: #D9AE5C;
    --gold-ink: #E8C275;
    --gold-tint: #3A2E17;
    --navy-tint: #2E2A25;
    --good: #7FCB96;
    --good-tint: #1C2E20;
    --warn: #E3B365;
    --warn-tint: #3A2E14;
    --bad: #F0928A;
    --bad-tint: #3A211C;
    --grid-line: rgba(255,255,255,0.07);
    --on-ink: #171513;
    --on-solid: #171513;
  }
}
:root[data-theme="dark"]{
  --bg: #171513;
  --bg-elevated: #1D1A17;
  --surface: #24211D;
  --surface-2: #2E2A25;
  --border: #5A5349;
  --border-soft: #403B34;
  --ink: #FAF6F0;
  --ink-soft: #D6CEC2;
  --ink-faint: #ADA396;
  --accent: #C4605A;
  --accent-ink: #F2B3AB;
  --accent-tint: #3F2326;
  --cyan: #C4605A;
  --cyan-ink: #F2B3AB;
  --cyan-tint: #3F2326;
  --wine: #C4605A;
  --wine-ink: #F2B3AB;
  --wine-tint: #3F2326;
  --gold: #D9AE5C;
  --gold-ink: #E8C275;
  --gold-tint: #3A2E17;
  --navy-tint: #2E2A25;
  --good: #7FCB96;
  --good-tint: #1C2E20;
  --warn: #E3B365;
  --warn-tint: #3A2E14;
  --bad: #F0928A;
  --bad-tint: #3A211C;
  --grid-line: rgba(255,255,255,0.07);
  --on-ink: #171513;
  --on-solid: #171513;
}

/* Headings: a classic serif, set a little larger because its letters are small for their height. Small interface
   labels keep Lexend, so tiny text stays easy to read. */
h1, h2,
.serif-display,
.font-display.text-lg, .font-display.text-xl, .font-display.text-2xl, .font-display.text-3xl, .font-display.text-4xl{
  font-family: var(--serif-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1.24;
}

/* Small typewriter labels, used for the "FIG." captions and section labels on the marketing pages. */
.label-mono{
  font-family: var(--mono-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Cards: flat paper with a hairline edge, instead of rounded, floating tiles. */
.card{
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid var(--border);
}

::selection{ background: var(--cyan); color: var(--on-solid); }

/* Guide pages: typewriter breadcrumbs, a hairline above each section, flat call-to-action. */
.crumbs, .crumbs a{ font-family: var(--mono-label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.doc h2{ border-top: 1px solid var(--border); padding-top: 20px; margin-top: 40px; font-size: 30px; line-height: 1.26; }
.doc h1{ font-size: 46px; line-height: 1.2; font-weight: 500; }
.cta{ border-radius: 4px; border: 1px solid var(--ink); background: var(--surface-2); }
.grid a{ border-radius: 4px; }
.card.ref, .card{ border-radius: 6px; }

/* FAQ on guide, article and landing pages: each question opens and closes; every answer stays in the page's HTML. */
.faq-q{ border-top: 1px solid var(--border); }
.faq-q:last-of-type{ border-bottom: 1px solid var(--border); }
.faq-q summary{
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px;
  font-family: var(--serif-display); font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--ink);
}
.faq-q summary::-webkit-details-marker{ display: none; }
.faq-q summary::after{ content: "+"; flex: 0 0 auto; font-family: var(--mono-label); font-size: 22px; color: var(--accent); }
.faq-q[open] summary::after{ content: "–"; }
.faq-q summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-q p{ margin: 0 0 18px; padding-right: 36px; }