/* ============================================================
   JP News (جهينة نيوز) — design4a «الشبكة» (CNN-structure) — theme.css
   BOTH palettes live here. Resolution (no JS needed for the first
   paint, so the page never flashes the wrong theme):
     1. :root                            → light
     2. prefers-color-scheme: dark       → dark, unless the reader
        has explicitly chosen light
     3. [data-theme="dark"|"light"]      → the reader's choice wins
   The header toggle sets that attribute on <html> for the page view
   only; html-coding-standards §12 bans localStorage, so the choice
   deliberately does not survive a reload.

   The dark block is written twice on purpose — CSS cannot share one
   declaration set between a media query and an attribute selector
   without a build step, and this project has none. The two copies
   were generated together and must stay identical.

   Ad frames sit on a LIGHT plinth in BOTH palettes.
   ============================================================ */

:root {
    color-scheme: light;

    /* Brand core — sampled from the live masthead: editorial ink + the news red */
    --color-primary: #202020;                       /* editorial ink — strong UI on light */
    --color-primary-hover: #3C3C3C;
    --color-secondary: #2F3A46;                     /* slate — FILL role only */
    --color-accent: #C1121F;                        /* the news red, TEXT/decor role — RESERVED breaking */
    --color-accent-fill: #C1121F;                   /* the news red, FILL role (buttons) */
    --color-accent-fill-hover: #A00F19;
    --color-link-hover: #2F3A46;                    /* hover colour for headline links */
    --color-rule-strong: #202020;                   /* heavy structural rules */
    --color-focus: #C1121F;                         /* focus ring on the page ground */

    /* Neutrals */
    --color-text: #17191C;
    --color-text-muted: #5A6472;
    --color-text-inverse: #FFFFFF;
    --color-bg: #FFFFFF;
    --color-bg-alt: #F4F5F7;                        /* panel surface (facts, readers, directory) */
    --color-border: #DFE3E8;                        /* hairlines between rows */

    /* Chrome (header / drawer / footer) — light in the light palette
       because the client's black-wordmark vector allows it */
    --color-chrome: #FFFFFF;
    --color-chrome-deep: #F4F5F7;                   /* fields and hover pads on the chrome */
    --color-chrome-text: #17191C;
    --color-chrome-muted: #5A6472;
    --color-chrome-border: #C8CFD6;
    --color-field-border: #7A8491;                  /* form-field boundary — 3.6:1 on white, 1.4.11 */

    /* FOOTER — dark in BOTH palettes (client 2026-09-21): the page ends on a
       dark-grey ground even when the page itself is light, so the footer reads
       as the end of the document and not as one more section of it.
       Light palette: dark grey. Dark palette: deeper than the page ground. */
    --color-footer-bg: #2B3139;                     /* dark grey — 13.1:1 under white text */
    --color-footer-deep: #454F5A;                   /* cell hover pad — white still 8.3:1 */
    --color-footer-text: #FFFFFF;
    --color-footer-muted: #C3C9D1;                  /* 7.9:1 on the footer ground */
    --color-footer-border: #7A8491;                 /* the hairline cell grid — 3.5:1, 1.4.11 */
    --color-footer-mark: #E8626C;                   /* the red rule under a footer title — 4.0:1 */
    --color-footer-link: #FF8D95;                   /* credit/link hover TEXT — 5.9:1 */

    /* The ad band above the header and the dark «المزيد من جهينة» zone —
       the two deliberately dark bands of the light page */
    --color-band: #0C0E11;
    --color-band-text: #F1F3F5;
    --color-band-muted: #A9B1BB;
    --color-band-border: #2E343B;

    /* Theme switch (drawer): off track 3.2:1 on white, white knob 3.2:1 on it; on = the news red */
    --color-switch-off: #8A94A0;
    --color-switch-off-border: #6C7683;
    --color-switch-on: #C1121F;
    --color-switch-knob: #FFFFFF;
    /* Ad placeholder — review placeholder, not production: light red fill + red border, label + tier size inside */
    --color-ad-bg: #FFF3F3;
    --color-ad-border: #C1121F;
    --color-ad-text: #8A0E17;

    /* Pill kicker over a photograph — white pill, ink text, both palettes */
    --color-pill-bg: #FFFFFF;
    --color-pill-text: #17191C;

    /* «خاص بجهينة نيوز» badge (2026-09-21) — a royal blue chosen to be an
       UNMISTAKABLY different signal from the سياسة category blue: ΔE 64.6
       against #1A5089, where the two politics palette values differ by only
       39.3. White text 6.85:1; the chip is 6.85:1 on the light ground. */
    --color-badge-exclusive: #1246E8;
    --color-badge-exclusive-text: #FFFFFF;

    /* «فيديو» poster furniture (2026-09-24) — the play disc and the duration
       chip sit on a PHOTOGRAPH, which is the same image in both palettes, so the
       values do not change with the theme; they are repeated in all three blocks
       only because every token lives in all three. Plate #0B0D10 with white ink
       is 19.5:1. The 2px white edge keeps the disc a visible shape on a DARK
       poster, where the plate alone would sink into the photograph. */
    --color-video-plate: #0B0D10;
    --color-video-ink: #FFFFFF;
    --color-video-edge: #FFFFFF;

    /* Text placed ON a category-coloured fill */
    --color-on-cat: #FFFFFF;                        /* deep category hues → white text */

    /* Category colours — one per MAIN category (client rule);
       subcategories inherit. None reuse the accent. */
    --color-cat-politics: #1A5089;
    --color-cat-local-affairs: #0E6A5C;
    --color-cat-economy: #7A5500;
    --color-cat-jouhina-tribune: #5B3E96;
    --color-cat-special-reports: #8F2463;
    --color-cat-sports: #1E7A34;
    --color-cat-culture-arts: #964400;
    --color-cat-miscellany: #0F6E86;
    --color-cat-society: #3E5C76;
    --color-cat-opinion: #8A2A3B;

    /* Image scrim — carries white text over an unknown photograph, so it
       is sized for the worst case (a blown-out white frame) */
    --scrim-full: rgba(10, 12, 14, 0.62);
    --scrim-soft: rgba(10, 12, 14, 0.0);

    /* Selection */
    --color-selection-bg: #1A5089;
    --color-selection-text: #FFFFFF;
}

/* Reader's OS asks for dark, and they have not overridden it */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* Brand core */
        --color-primary: #E8EAED;                       /* editorial ink, inverted */
        --color-primary-hover: #FFFFFF;
        --color-secondary: #35414E;                     /* slate — FILL role only */
        --color-accent: #FF6B75;                        /* the news red, TEXT/decor role */
        --color-accent-fill: #C1121F;                   /* the news red, FILL role */
        --color-accent-fill-hover: #D92A38;
        --color-link-hover: #A9C2DD;
        --color-rule-strong: #58616D;
        --color-focus: #FF6B75;

        /* Neutrals */
        --color-text: #F1F3F5;
        --color-text-muted: #A9B1BB;
        --color-text-inverse: #FFFFFF;
        --color-bg: #101317;
        --color-bg-alt: #1A1F26;                        /* panel surface */
        --color-border: #2A3038;

        /* Chrome (header / drawer / footer) */
        --color-chrome: #0C0E11;
        --color-chrome-deep: #1A1F26;
        --color-chrome-text: #F1F3F5;
        --color-chrome-muted: #A9B1BB;
        --color-chrome-border: #262B31;
        --color-field-border: #6C7683;                  /* 4.1:1 on the dark chrome */

    /* FOOTER — deeper than the page ground (#101317) so the page visibly ends */
    --color-footer-bg: #05070A;                     /* 20.2:1 under white text */
    --color-footer-deep: #1A1F26;                   /* cell hover pad — white still 16.6:1 */
    --color-footer-text: #FFFFFF;
    --color-footer-muted: #B7BFC9;                  /* 10.9:1 on the footer ground */
    --color-footer-border: #58616D;                 /* the hairline cell grid — 3.2:1, 1.4.11 */
    --color-footer-mark: #E8626C;                   /* the red rule under a footer title — 6.1:1 */
    --color-footer-link: #FF8D95;                   /* credit/link hover TEXT — 9.1:1 */

        /* Dark bands on a dark page lift one step instead of dropping */
        --color-band: #1A1F26;
        --color-band-text: #F1F3F5;
        --color-band-muted: #A9B1BB;
        --color-band-border: #2E343B;

        /* Theme switch (drawer): off track 4.1:1 on the dark chrome; on = the lifted red (3.3:1 under the white knob) */
        --color-switch-off: #6C7683;
        --color-switch-off-border: #8A94A0;
        --color-switch-on: #E8626C;
        --color-switch-knob: #FFFFFF;

        /* Ad placeholder — dark-red tint, equivalent weight: light red fill + red border, label + tier size inside */
        --color-ad-bg: #2A1417;
        --color-ad-border: #E8626C;
        --color-ad-text: #FFB4B9;

        /* Pill kicker over a photograph */
        --color-pill-bg: #FFFFFF;
        --color-pill-text: #17191C;

        /* «خاص بجهينة نيوز» badge — lifted so the CHIP still reads as a shape on
           the dark ground (3.43:1 on #101317); white text 5.43:1. ΔE 68.7 from
           the dark سياسة tint #82B4E8, which is a pale blue, not a royal one. */
        --color-badge-exclusive: #2E5BF0;
        --color-badge-exclusive-text: #FFFFFF;

        /* «فيديو» poster furniture — same values as the light block (on a photo) */
        --color-video-plate: #0B0D10;
        --color-video-ink: #FFFFFF;
        --color-video-edge: #FFFFFF;

        /* Text on a category fill */
        --color-on-cat: #101317;                        /* light category tints → dark text */

        /* Category colours */
        --color-cat-politics: #82B4E8;
        --color-cat-local-affairs: #58C0AC;
        --color-cat-economy: #D4AF4A;
        --color-cat-jouhina-tribune: #B49BE8;
        --color-cat-special-reports: #E88FC4;
        --color-cat-sports: #66C787;
        --color-cat-culture-arts: #EFA06B;
        --color-cat-miscellany: #64C1DC;
        --color-cat-society: #A9C2DD;
        --color-cat-opinion: #E28E9D;

        /* Image scrim */
        --scrim-full: rgba(4, 5, 6, 0.62);
        --scrim-soft: rgba(4, 5, 6, 0.0);

        /* Selection */
        --color-selection-bg: #82B4E8;
        --color-selection-text: #101317;
    }
}

/* Reader pressed the toggle — identical to the block above */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Brand core */
    --color-primary: #E8EAED;                       /* editorial ink, inverted */
    --color-primary-hover: #FFFFFF;
    --color-secondary: #35414E;                     /* slate — FILL role only */
    --color-accent: #FF6B75;                        /* the news red, TEXT/decor role */
    --color-accent-fill: #C1121F;                   /* the news red, FILL role */
    --color-accent-fill-hover: #D92A38;
    --color-link-hover: #A9C2DD;
    --color-rule-strong: #58616D;
    --color-focus: #FF6B75;

    /* Neutrals */
    --color-text: #F1F3F5;
    --color-text-muted: #A9B1BB;
    --color-text-inverse: #FFFFFF;
    --color-bg: #101317;
    --color-bg-alt: #1A1F26;                        /* panel surface */
    --color-border: #2A3038;

    /* Chrome (header / drawer / footer) */
    --color-chrome: #0C0E11;
    --color-chrome-deep: #1A1F26;
    --color-chrome-text: #F1F3F5;
    --color-chrome-muted: #A9B1BB;
    --color-chrome-border: #262B31;
    --color-field-border: #6C7683;                      /* 4.1:1 on the dark chrome */

    /* FOOTER — deeper than the page ground (#101317) so the page visibly ends */
    --color-footer-bg: #05070A;                     /* 20.2:1 under white text */
    --color-footer-deep: #1A1F26;                   /* cell hover pad — white still 16.6:1 */
    --color-footer-text: #FFFFFF;
    --color-footer-muted: #B7BFC9;                  /* 10.9:1 on the footer ground */
    --color-footer-border: #58616D;                 /* the hairline cell grid — 3.2:1, 1.4.11 */
    --color-footer-mark: #E8626C;                   /* the red rule under a footer title — 6.1:1 */
    --color-footer-link: #FF8D95;                   /* credit/link hover TEXT — 9.1:1 */

    /* Dark bands on a dark page lift one step instead of dropping */
    --color-band: #1A1F26;
    --color-band-text: #F1F3F5;
    --color-band-muted: #A9B1BB;
    --color-band-border: #2E343B;

    /* Theme switch (drawer): off track 4.1:1 on the dark chrome; on = the lifted red (3.3:1 under the white knob) */
    --color-switch-off: #6C7683;
    --color-switch-off-border: #8A94A0;
    --color-switch-on: #E8626C;
    --color-switch-knob: #FFFFFF;

    /* Ad placeholder — dark-red tint, equivalent weight: light red fill + red border, label + tier size inside */
    --color-ad-bg: #2A1417;
    --color-ad-border: #E8626C;
    --color-ad-text: #FFB4B9;

    /* Pill kicker over a photograph */
    --color-pill-bg: #FFFFFF;
    --color-pill-text: #17191C;

    /* «خاص بجهينة نيوز» badge — lifted so the CHIP still reads as a shape on
       the dark ground (3.43:1 on #101317); white text 5.43:1. ΔE 68.7 from
       the dark سياسة tint #82B4E8, which is a pale blue, not a royal one. */
    --color-badge-exclusive: #2E5BF0;
    --color-badge-exclusive-text: #FFFFFF;

    /* «فيديو» poster furniture — same values as the light block (on a photo) */
    --color-video-plate: #0B0D10;
    --color-video-ink: #FFFFFF;
    --color-video-edge: #FFFFFF;

    /* Text on a category fill */
    --color-on-cat: #101317;                        /* light category tints → dark text */

    /* Category colours */
    --color-cat-politics: #82B4E8;
    --color-cat-local-affairs: #58C0AC;
    --color-cat-economy: #D4AF4A;
    --color-cat-jouhina-tribune: #B49BE8;
    --color-cat-special-reports: #E88FC4;
    --color-cat-sports: #66C787;
    --color-cat-culture-arts: #EFA06B;
    --color-cat-miscellany: #64C1DC;
    --color-cat-society: #A9C2DD;
    --color-cat-opinion: #E28E9D;

    /* Image scrim */
    --scrim-full: rgba(4, 5, 6, 0.62);
    --scrim-soft: rgba(4, 5, 6, 0.0);

    /* Selection */
    --color-selection-bg: #82B4E8;
    --color-selection-text: #101317;
}

/* ------------------------------------------------------------
   CATEGORY COLOURS INSIDE THE FOOTER — the footer ground is dark
   in BOTH palettes, so the ten category marks there always use the
   light tints. In the dark palette these are already the page
   values, so this block is a no-op there; in the light palette it
   is what keeps the deep hues (#1A5089 on #2B3139 would be 1.3:1)
   off a dark ground. Lowest of the ten on #2B3139: 5.4:1.
   ------------------------------------------------------------ */
.site-footer {
    --color-cat-politics: #82B4E8;
    --color-cat-local-affairs: #58C0AC;
    --color-cat-economy: #D4AF4A;
    --color-cat-jouhina-tribune: #B49BE8;
    --color-cat-special-reports: #E88FC4;
    --color-cat-sports: #66C787;
    --color-cat-culture-arts: #EFA06B;
    --color-cat-miscellany: #64C1DC;
    --color-cat-society: #A9C2DD;
    --color-cat-opinion: #E28E9D;
}

/* ------------------------------------------------------------
   SHAPE — square, like the reference: the pill kicker and the
   round play badge are the only curves on the page
   ------------------------------------------------------------ */
:root {
    --radius-card: 0;        /* thumbs, panels, ad frames, footer cells */
    --radius-media: 0;       /* large image cards */
    --radius-btn: 2px;
    --radius-chip: 999px;
    --radius-field: 2px;
    --radius-bar: 0;         /* the 4px category bars and short rules */
}

::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
}