/* ============================================================
   VARIANTS — Cool mode
   [data-mode="cool"] — an opt-in third mode alongside light/dark.
   Palette drawn from the OMEGA × Swatch "Mission to the Moon":
     mint      #d4ecd6  → paper (case / background)
     slate     #293a4b  → ink + accent (dial / strap)
     porcelain #eef3f4  → surface (subdials — cool blue-grey near-white)
     orange    #c8552c  → highlight (seconds hand)

   Loaded LAST in the barrel: the dark auto-block targets
   html:not([data-mode="light"]), which also matches
   data-mode="cool" on a dark-OS machine, so cool must win on
   source order. It therefore re-states the same component
   surfaces dark overrides.
   ============================================================ */

html[data-mode="cool"] {
    /* Mint is a light-style palette — re-assert `light` so it wins over the
       dark auto-block's `color-scheme: dark` on a dark-OS browser (same
       source-order tie-break as the role tokens below). Without this, Cool
       on a dark OS gets force-darkened to brown. */
    color-scheme:            light;
    --color-ink:             #293a4b;
    --color-paper:           #d4ecd6;
    --color-surface:         #eef3f4;
    --color-muted:           #5c6f7d;
    --color-border:          rgba(41, 58, 75, 0.16);
    --color-accent:          #293a4b;
    --color-accent-contrast: #f4faf4;
    --color-accent-soft:     rgba(41, 58, 75, 0.08);
    --color-highlight:       #c8552c;
    --shadow-soft:           0 20px 50px rgba(41, 58, 75, 0.12);
}

/* Component surfaces — mint background, frosted-porcelain cards
   (the white subdials, cooled toward slate), slate hairlines.
   Mirrors dark.css selectors. */

html[data-mode="cool"] body {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), transparent 35%),
        linear-gradient(180deg, #c4e4c8 0%, var(--color-paper) 38%, #dff0e0 100%);
}

html[data-mode="cool"] .site-header {
    background: rgba(212, 236, 214, 0.82);
    border-bottom-color: rgba(41, 58, 75, 0.1);
}

html[data-mode="cool"] .surface-card,
html[data-mode="cool"] .card {
    background: rgba(238, 243, 245, 0.9);
}

html[data-mode="cool"] .surface-card-accent {
    background: linear-gradient(180deg, rgba(41, 58, 75, 0.07), rgba(41, 58, 75, 0.02));
}

html[data-mode="cool"] .button-secondary,
html[data-mode="cool"] .topic-pills a {
    background: rgba(238, 243, 245, 0.8);
}

html[data-mode="cool"] .signup-form input {
    background: #f4f8f9;
}

html[data-mode="cool"] .site-footer,
html[data-mode="cool"] .section-footer-tint {
    background: rgba(238, 243, 245, 0.45);
}

html[data-mode="cool"] .post-card-featured {
    background: linear-gradient(180deg, rgba(241, 246, 247, 0.95), rgba(238, 243, 245, 0.88));
}

html[data-mode="cool"] .hero-home::before {
    background:
        radial-gradient(circle at top right, rgba(200, 85, 44, 0.07), transparent 30%),
        radial-gradient(circle at left center, rgba(41, 58, 75, 0.05), transparent 32%);
}