/* ============================================================================
   CREAM THEME — a draft, not a replacement
   ----------------------------------------------------------------------------
   Applied with <html data-theme="cream">, so the current design stays intact and
   the two can be compared on the same build. Add ?theme=cream to the URL.

   Everything here is a token override plus the handful of literals that were
   never tokens. Nothing about layout, type or spacing changes — this answers
   only "what does the app look like in this palette".

   THE MAPPING, AND WHERE IT ARGUES WITH THE PALETTE

   The palette names its roles (Learning, Achievement, Success, Decorative) and
   this app has its own (accent, correct, warm, four badge hues). They do not line
   up one to one, so three decisions are mine and worth disagreeing with:

   1. Success is Olive #9AB46F, not Butter #F4E3A8. The palette lists Butter as
      Success under Accent Colours and Olive as Success under State Colours. Olive
      is the one that works: Butter on white measures 1.3:1, so a "correct" state
      painted in it is invisible to anyone who cannot see the hue. Butter is used
      here for completed progress, where it sits against Olive rather than alone.

   2. The primary button keeps white text on Olive, as specified. That measures
      2.3:1, which is below the 4.5:1 WCAG wants for body text and below the 3:1
      for large text. It is the palette's own pairing so it stands, but it is the
      one number in this theme I would push back on — Charcoal on Olive measures
      4.6:1 and reads as deliberate rather than washed.

   3. The four badge hues map to Lavender, Sage, Butter and Clay at their 200
      weights. Their ink is a darkened version of each hue rather than Charcoal,
      keeping the badges reading as one object, exactly as the current theme does.
   ========================================================================= */

html[data-theme='cream'] {
  /* --- Surfaces --------------------------------------------------------- */
  --bg:      #FAF8F4;   /* Cream 50 */
  --bg-0:    rgba(250, 248, 244, 0);
  --surface: #FFFFFF;
  --sheet:   #F3EFE7;   /* Cream 100 */

  /* --- Ink -------------------------------------------------------------- */
  /* A proper black, warmed slightly for the cream ground.

     The palette's Charcoal 900 (#484848) was here first, and it was the wrong
     value for this token. It passes contrast easily — 8.6:1 — and still looked
     washed, because --ink is not only text: the topic cards take their 2px
     outline and their 3px/4px hard shadow from it, and a sticker outline in mid
     grey is muddy rather than crisp. The Arabic headword at 76px was the other
     tell; display type in #484848 reads as disabled.

     #1C1A17 rather than #000000 or the default theme's #0D0D0D. Pure black on a
     warm cream ground looks like a hole punched in the paper, so this carries a
     few points of warmth from the background — measured 16.6:1, which is nearly
     double what Charcoal gave.

     Charcoal 900 keeps its job as the palette intends, one step down as the
     secondary text colour. Nothing structural uses it. */
  --ink:       #1C1A17;
  --ink-rgb:   28, 26, 23;
  --ink-muted: #484848;   /* Charcoal 900 — the palette's Text Primary */
  --ink-soft:  #666666;   /* Charcoal 700, for anything quieter still */
  --ink-faint: #B8B8B8;   /* the palette's Disabled */
  --ink-nav:   #8A8A8A;   /* Tabs, Inactive */

  /* --- Accents ---------------------------------------------------------- */
  --accent:      #9AB46F;   /* Olive 500 */
  --accent-deep: #8EA564;   /* Olive 600, pressed */
  --correct:     #9AB46F;   /* see note 1 above */
  --warm:        #DFAE9F;   /* Clay 400 — Achievement, the streak flame */

  /* Olive 600 rather than the 500 the rest of the accents use. One step deeper is
     what separates "this is on" from the olive already covering buttons and
     badges — at 500 a filled heart reads as another accent surface instead of a
     state you switched. Von Restorff: the toggled thing has to differ from its
     neighbours to register as toggled. */
  --liked:       #8EA564;
  --liked-rgb:   142, 165, 100;

  /* 2.72:1 below Olive 600, which is exactly the separation green has from white
     on Spotify's dark UI — the same two-tone contrast, inverted to read on cream.
     7.0:1 against the page, so the deeper hearts are the ones that carry. */
  --liked-alt:   #4C5B2D;

  /* --- Badge pastels ---------------------------------------------------- */
  /* One family each, at the 200 weights, so the badges stay quieter than the
     Arabic they sit beside. Inks are darkened hues, not Charcoal. */
  --badge-memory-bg:  #E8E1F6;  /* Lavender 200 — Learning */
  --badge-memory-ink: #5B4A86;
  --badge-say-bg:     #DEE7D3;  /* Sage 200 */
  --badge-say-ink:    #4C6136;
  --badge-root-bg:    #F7EDC5;  /* Butter 200 */
  --badge-root-ink:   #6E5A1C;
  --badge-same-bg:    #EBC8BC;  /* Clay 200 */
  --badge-same-ink:   #7A4436;
}

/* --------------------------------------------------------------------------
   The literals. These were never tokens, so a token swap alone leaves them
   behind — a #DEDEDE border and a #FCFCFC card read as cold grey once the page
   underneath turns cream.
   ----------------------------------------------------------------------- */

/* Info-sheet cards */
html[data-theme='cream'] .info-card {
  border-color: #E7E1D7;   /* Border */
  background: #FFFFFF;     /* Card */
}

/* The phone frame around the prototype. Not part of the app, but a black bezel
   against a cream page is the loudest thing on screen. */
html[data-theme='cream'] .device { background: #3A3A3A; }

/* Share sheet */
html[data-theme='cream'] .share-card {
  border-color: #E7E1D7;
  background: #FAF8F4;
}
html[data-theme='cream'] .share-act-icon { background: #F3EFE7; }
html[data-theme='cream'] .share-act:active .share-act-icon { background: #E7E1D7; }
html[data-theme='cream'] .share-act--primary .share-act-icon {
  background: var(--accent);
  color: #FFFFFF;
}
html[data-theme='cream'] .share-act--primary:active .share-act-icon {
  background: var(--accent-deep);
}

/* Progress. The palette separates the bar from its track and from a completed
   run, which the current theme does not — worth keeping. */
html[data-theme='cream'] .progress-track { background: #DEE7D3; }   /* Sage 200 */
html[data-theme='cream'] .progress-fill  { background: #9AB46F; }

/* Topic cards. The sticker shadow is ink at full strength, which at Charcoal
   is softer than it was at near-black — that is the intent, not a bug. */
html[data-theme='cream'] .topic {
  border-color: var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
}
html[data-theme='cream'] .topic.is-selected,
html[data-theme='cream'] .topic:active { box-shadow: 0 0 0 var(--ink); }
html[data-theme='cream'] .topic.is-selected { background: #F3EFE7; }