/* colors.css -- Tier 1: color tokens ONLY.
   Brand tokens (yellow, dark-on-yellow text) mirror the mobile palette
   (pollaroo_app/lib/core/theme/app_colors.dart). The trophy gold has no mobile
   constant, so it is web-defined here for the design lead to confirm via /Swatches.
   Page / card / border / muted / pill tones are web-specific values, inspired by
   mobile's grey shades but not transcribed from them.

   Theme resolution:
     :root / [data-theme="light"]            -> light (default)
     [data-theme="dark"]                     -> explicit dark
     prefers-color-scheme: dark (no explicit) -> dark (system fallback)
   The server stamps <html data-theme="..."> from the theme cookie (Task 8); the
   media query covers the "follow system" case before/without that stamp.

   EDIT-BOTH RULE (ADO #543): the dark token set exists TWICE below -- once under
   [data-theme="dark"] and once inside the prefers-color-scheme media query. Any
   dark token change must be made in BOTH blocks, byte-identical. There is no clean
   no-build dedup: CSS light-dark() would collapse them but hard-breaks pre-2024
   engines (Safari < 17.5 renders wrong colors, not a graceful fallback), and this
   is the anonymous public surface. Revisit when the support matrix allows. */

:root,
[data-theme="light"] {
    /* Brand -- constant across themes */
    --brand-yellow: #DFFE00;
    --brand-yellow-hover: #C9E500;
    --on-brand-yellow: #111111;
    --trophy-gold: #FFC107;
    --selected-check: #DFFE00;

    /* Surfaces + text (light) */
    --page-bg: #F7F8FA;
    --card-bg: #FFFFFF;
    --surface-2: #F0F2F5;
    --border: #E2E5EA;
    --text: #14161A;
    --text-muted: #5B6470;
    --link: #2563EB;
    --danger: #DC3545;

    /* The grid tile that shows the Pollaroo face instead of a photo (ADO #639 round 4). THEMED, not
       constant: Sean asked for a light grey card in light mode and a darker grey one in dark.
       The scrim is a translucent version of the same card, because the caption over it is themed
       text -- a fixed dark scrim would put dark text on a dark veil in light mode. The two move
       together; changing one without the other is what makes a long question unreadable. */
    --tile-mark-bg: #EDEFF2;
    --tile-mark-scrim: rgba(237, 239, 242, 0.94);

    /* Theme-constant semantics (identical in light + dark) */
    --overlay: rgba(0, 0, 0, 0.55);

    /* Follow badge (ADO #624). Theme-constant ON PURPOSE: the badge sits on an avatar PHOTO, so it
       resolves against arbitrary imagery rather than against the page. A themed token would flip
       with light/dark while the thing behind it -- someone's profile picture -- did not. */
    --follow-badge-veil: rgba(255, 255, 255, 0.78);
    --follow-badge-ring: rgba(255, 255, 255, 0.92);
    --follow-badge-glyph: #14161A;

    /* Soft dark edge, the web twin of the app's badgeEdgeShadow. Without it the followed badge --
       a translucent white veil inside a white ring -- disappears completely on a pale avatar, and
       only its check appears to float on the picture. Found by rendering the badge on a white
       photo (ADO #635); reasoning about the tokens alone did not surface it. */
    --follow-badge-edge: rgba(0, 0, 0, 0.28);
    --like-active: #ED4956;
    --save-active: #3897F0;

    /* Answer pills (light) */
    --pill-unanswered-bg: #E7EBF0;
    --pill-unanswered-text: #14161A;
    --pill-answered-text: #14161A;
    --pill-bar-fill: #D3D9E0;
}

/* Dark token values, shared by the explicit-dark selector and the system-dark media query. */
[data-theme="dark"] {
    --page-bg: #0F1115;
    --card-bg: #181B21;
    --surface-2: #20242C;
    --border: #2A2F38;
    --text: #E8EAED;
    --text-muted: #9AA3AF;
    --link: #60A5FA;
    --danger: #F87171;
    --tile-mark-bg: #262A31;
    --tile-mark-scrim: rgba(38, 42, 49, 0.94);

    --pill-unanswered-bg: #2A2F38;
    --pill-unanswered-text: #E8EAED;
    --pill-answered-text: #E8EAED;
    --pill-bar-fill: #3A4150;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page-bg: #0F1115;
        --card-bg: #181B21;
        --surface-2: #20242C;
        --border: #2A2F38;
        --text: #E8EAED;
        --text-muted: #9AA3AF;
        --link: #60A5FA;
        --danger: #F87171;
        --tile-mark-bg: #262A31;
        --tile-mark-scrim: rgba(38, 42, 49, 0.94);

        --pill-unanswered-bg: #2A2F38;
        --pill-unanswered-text: #E8EAED;
        --pill-answered-text: #E8EAED;
        --pill-bar-fill: #3A4150;
    }
}