/* Bencherquest v2 — design tokens.
   This is the ONLY file where raw hex / rgba values may appear. Every component
   references these custom properties; nothing else hardcodes a color.

   Light mode (default): Warm Woodland — parchment + cream + moss + soft wood.
   Dark mode (prefers-color-scheme: dark): Sage Night — green-charcoal
   surfaces, eucalyptus CTAs, and warm copper/gold accents. */

:root {
  /* Canvas — deeper warm parchment (bg-main #E5D7C1) */
  --bq-canvas:
    linear-gradient(180deg, rgba(232, 219, 199, 0.62) 0%, rgba(226, 211, 187, 0.70) 52%, rgba(216, 198, 169, 0.80) 100%),
    url("../assets/background-light.webp"),
    linear-gradient(180deg, #E8DBC7 0%, #E2D3BB 52%, #D8C6A9 100%);

  /* Surfaces */
  --bq-card-surface: #F3E4CE;         /* bg-card — cards, panels, modals */
  --bq-card-border: #C8B397;          /* border-soft */
  --bq-info-surface: #EADBC0;         /* secondary info-link panels */
  --bq-info-border: #BFA685;
  --bq-hairline: #D2BFA4;             /* softer internal divider */
  --bq-scrim: rgba(43, 51, 40, 0.45); /* text-main @ 45% — modal backdrop dim */

  /* Text */
  --bq-text-primary: #283126;         /* text-main */
  --bq-text-muted: #4F5848;           /* text-muted — helper / metadata (AA ≥4.5) */
  --bq-text-faint: #545E49;           /* wordmark / faint label (AA ≥4.5) */

  /* Brand (moss) — primary CTAs */
  --bq-brand: #4F6F52;
  --bq-brand-hover: #3F5A42;
  --bq-brand-text: #FBF6EC;           /* cream text on a brand fill */
  --bq-next-fill: #667153;             /* muted moss CTA for quiz advance */
  --bq-next-hover: #586348;
  --bq-next-text: #FBF6EC;

  /* Accents — use sparingly */
  --bq-accent-wood: #7C5133;          /* small secondary accent / decorative */
  --bq-accent-sand: #C6A15B;          /* trophy / featured */
  --bq-guide-title: #6F7755;          /* how-to overlay step titles */
  --bq-streak: #4F6F52;               /* total-correct / score highlight — balanced moss */

  /* Correct (moss success) */
  --bq-correct-fill: #E4E8D3;         /* pale moss wash */
  --bq-correct-border: #6F7F4F;       /* success */
  --bq-correct-text: #46512F;         /* deep moss — check icon / accent text */

  /* Wrong (clay error) */
  --bq-wrong-fill: #F0DED7;           /* pale clay wash */
  --bq-wrong-border: #A45A4F;         /* error */
  --bq-wrong-text: #8A4239;           /* deep clay — wrong icon */

  /* Focus ring — brand moss */
  --bq-focus-ring: rgba(79, 111, 82, 0.55);
}

/* Motion — page-transition entrance + reduced-motion fallback.
   bq-view-enter: 300ms ease-out cross-fade + 4px upward slide. fill-mode
   `backwards` so no transform is retained after entry (a retained transform
   would establish a containing block and break the quiz sticky header). */
@keyframes bq-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bq-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bq-view-enter { animation: bq-enter 300ms ease-out backwards; }

@media (prefers-reduced-motion: reduce) {
  /* Opacity only: drop the entry slide, the choice-tap scale, and the
     correct/wrong settle fill — fades stay. */
  .bq-view-enter { animation: bq-fade 300ms ease-out backwards; }
  [data-choice] { transition-property: opacity !important; }
  button:active { transform: none !important; } /* disable all tap-scale */
  #reveal-correct, #reveal-wrong { transition-property: opacity !important; }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Canvas — calm green-charcoal night, less forest-heavy than moss. */
    --bq-canvas:
      linear-gradient(180deg, rgba(27, 35, 31, 0.74) 0%, rgba(21, 28, 25, 0.82) 54%, rgba(17, 23, 20, 0.90) 100%),
      url("../assets/background-dark.webp"),
      linear-gradient(180deg, #1B231F 0%, #151C19 54%, #111714 100%);

    /* Surfaces */
    --bq-card-surface: #242D28;         /* bg-card */
    --bq-card-border: #46534B;          /* border-soft */
    --bq-info-surface: #1F2923;         /* secondary info-link panels */
    --bq-info-border: #53624F;
    --bq-hairline: #38453E;             /* softer internal divider */
    --bq-scrim: rgba(12, 18, 15, 0.64); /* modal backdrop dim */

    /* Text */
    --bq-text-primary: #E9DDC8;         /* warm cream — not pure white */
    --bq-text-muted: #BEB6A4;
    --bq-text-faint: #A09686;           /* AA ≥4.5 on card surfaces */

    /* Brand (eucalyptus) — primary CTAs */
    --bq-brand: #9AB88D;
    --bq-brand-hover: #AAC79E;
    --bq-brand-text: #121A12;           /* deep green-charcoal text on the fill */
    --bq-next-fill: #91A866;             /* warmer olive CTA for quiz advance */
    --bq-next-hover: #A0B777;
    --bq-next-text: #121A12;

    /* Accents */
    --bq-accent-wood: #CDA06A;
    --bq-accent-sand: #DFC370;
    --bq-guide-title: #E5EBD2;          /* how-to overlay step titles */
    --bq-streak: #9AB88D;               /* total-correct / score highlight — balanced eucalyptus */

    /* Correct (eucalyptus success) */
    --bq-correct-fill: #2E3D2F;         /* dark eucalyptus wash */
    --bq-correct-border: #9CC27F;       /* success */
    --bq-correct-text: #C7E6B6;         /* light eucalyptus — check icon / accent text */

    /* Wrong (clay error) */
    --bq-wrong-fill: #432D2A;           /* dark clay wash */
    --bq-wrong-border: #D8897C;         /* error */
    --bq-wrong-text: #F0B8AD;           /* light clay — wrong icon */

    /* Focus ring — brand teal */
    --bq-focus-ring: rgba(154, 184, 141, 0.62);
  }
}