/* ============================================================
   Ana Limper — colour themes
   Default is cream (light). Dark applies when the visitor
   chooses it OR when their device is set to dark mode and
   they haven't made a choice. Edit the colours below.
   ============================================================ */

/* --- CREAM (light) : the default --- */
:root{
    --ground:#F7F4ED;      /* page background      */
    --ground-alt:#EFEADF;  /* footer / quiet bands */
    --ink:#24312A;         /* body text            */
    --ink-quiet:#5E6B5C;   /* secondary text       */
    --gold:#B98A26;        /* rules, borders       */
    --gold-lit:#8A6314;    /* gold text on cream   */
    --frame:#E7E1D4;       /* photo frame fill     */
    --rule:rgba(185,138,38,.35);
    --field-border:#8A6314;  /* form field border, AA non-text contrast */
    --glow:rgba(200,151,47,.16);
    --frame-edge:rgba(36,49,42,.14);
    --cta-hover-bg:#24312A;
    --cta-hover-fg:#F7F4ED;
    /* product-page action buttons (Ask / Share) — solid so they stand out */
    --btn-bg:#8A6314;      /* darker gold: cream text = 4.9:1 (AA) */
    --btn-fg:#F7F4ED;
    --btn-border:#B98A26;
    --btn-bg-hover:#6E4E10;
    --btn-fg-hover:#F7F4ED;
}

/* --- DARK : applied when the toggle sets data-theme="dark" --- */
:root[data-theme="dark"]{
    --ground:#14251E;      /* page background      */
    --ground-alt:#1B3227;  /* footer / quiet bands */
    --ink:#EDE7DA;         /* body text            */
    --ink-quiet:#9EAF9F;   /* secondary text       */
    --gold:#C8972F;        /* rules, borders       */
    --gold-lit:#E8CD8A;    /* gold text on dark    */
    --frame:#EDE7DA;       /* photo frame fill     */
    --rule:rgba(200,151,47,.30);
    --field-border:#C8972F;
    --glow:rgba(200,151,47,.20);
    --frame-edge:transparent;
    --cta-hover-bg:#C8972F;
    --cta-hover-fg:#14251E;
    /* product-page action buttons (Ask / Share) — solid so they stand out */
    --btn-bg:#C8972F;
    --btn-fg:#14251E;
    --btn-border:#C8972F;
    --btn-bg-hover:#E8CD8A;
    --btn-fg-hover:#14251E;
}

/* --- Follow the device setting until the visitor picks a theme --- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#14251E;      /* page background      */
    --ground-alt:#1B3227;  /* footer / quiet bands */
    --ink:#EDE7DA;         /* body text            */
    --ink-quiet:#9EAF9F;   /* secondary text       */
    --gold:#C8972F;        /* rules, borders       */
    --gold-lit:#E8CD8A;    /* gold text on dark    */
    --frame:#EDE7DA;       /* photo frame fill     */
    --rule:rgba(200,151,47,.30);
    --field-border:#C8972F;
    --glow:rgba(200,151,47,.20);
    --frame-edge:transparent;
    --cta-hover-bg:#C8972F;
    --cta-hover-fg:#14251E;
    /* product-page action buttons (Ask / Share) — solid so they stand out */
    --btn-bg:#C8972F;
    --btn-fg:#14251E;
    --btn-border:#C8972F;
    --btn-bg-hover:#E8CD8A;
    --btn-fg-hover:#14251E;
  }
}