/*
 * Design tokens — the ONLY file with literal colour values.
 *
 * Shared by the public site (site.css), the admin panel (admin.css), article
 * content (content.css), the shared base (base.css) and the editor bundle
 * (article-editor.{css,js}; its MUI theme reads several colour tokens with
 * getComputedStyle, so colour tokens must stay plain #hex / rgba() — no
 * oklch(), color-mix(), light-dark() or var() chains).
 *
 * Theme selection:
 *   <html>                     → follows prefers-color-scheme
 *   <html data-theme="light">  → light, whatever the OS says
 *   <html data-theme="dark">   → dark, whatever the OS says
 * The choice is stored by assets/js/theme.js and applied before first paint by
 * templates/shared/theme-boot.php.
 *
 * Layout of this file: the light values on :root, then the dark values in
 * two blocks with identical contents (system dark without an explicit light
 * choice / explicit dark choice — CSS cannot merge a media-query condition
 * with an attribute selector). Both dark blocks are screen-only, so print
 * always gets the light set.
 *
 * Contrast (WCAG 2.2): every text/background pair below is ≥ 4.5:1 and every
 * UI boundary (input borders, focus ring) ≥ 3:1, in both themes. Ratios are
 * noted next to the values; recompute them when changing a colour.
 */

:root {
    color-scheme: light;

    /* --- Surfaces --------------------------------------------------------- */
    --color-bg: #ffffff;                 /* page background (site)            */
    --color-canvas: #f4f5f8;             /* admin page background             */
    --color-surface: #ffffff;            /* cards, panels, inputs, menus      */
    --color-surface-2: #f3f4f7;          /* subtle fills, table heads         */
    --color-header-bg: rgba(255, 255, 255, 0.88); /* translucent sticky header */
    --color-overlay: rgba(15, 17, 21, 0.45);

    /* --- Lines ------------------------------------------------------------ */
    --color-border: #e2e5ea;             /* decorative separators             */
    --color-border-strong: #7d8490;      /* input borders: 3.77 on #fff, 3.46 on canvas */

    /* --- Text ------------------------------------------------------------- */
    --color-text: #1a1c21;               /* 17.05 on bg, 15.64 on canvas      */
    --color-text-muted: #5b6270;         /* 6.13 on bg, 5.57 on surface-2     */

    /* --- Brand ------------------------------------------------------------ */
    --color-primary: #4f46e5;            /* 6.29 on bg, 5.77 on canvas        */
    --color-primary-hover: #4338ca;      /* 7.90 on bg                        */
    --color-primary-contrast: #ffffff;   /* 6.29 on primary, 7.90 on hover    */
    --color-primary-soft: #eef0fe;       /* tint; primary-hover on it: 6.97   */

    /* --- Status (text-safe on bg and on their own callout background) ----- */
    --color-danger: #c42b2b;             /* 5.63 on bg, 5.15 on error bg      */
    --color-danger-hover: #a32121;
    --color-danger-contrast: #ffffff;    /* 5.63 on danger                    */
    --color-success: #157a3c;            /* 5.41 on bg, 5.13 on success bg    */
    --color-warning: #a45208;            /* 5.54 on bg, 5.23 on warning bg    */
    --color-info: #0369a1;               /* 5.93 on bg, 5.31 on info bg       */

    /* --- Interaction ------------------------------------------------------ */
    --color-hover: rgba(26, 28, 33, 0.06);
    --color-active: rgba(26, 28, 33, 0.1);
    --color-focus-ring: #4f46e5;         /* 6.29 on bg, 5.77 on canvas        */
    --color-selection: rgba(79, 70, 229, 0.2);

    /* --- Content ---------------------------------------------------------- */
    --color-code-bg: #f3f4f6;
    --color-code-text: #1f2328;          /* 14.35 on code bg                  */
    --color-mark: #fde68a;               /* default highlight; mark-text 13.69 */
    --color-video-bg: #000000;           /* letterbox behind embedded video   */
    --color-find-match: #fef3c7;         /* editor search hit; text 15.31     */
    --color-find-current: #fdba74;       /* current search hit; text 10.11    */

    --callout-info-bg: #eef2ff;          /* text 15.24                        */
    --callout-info-border: #6366f1;      /* 3.99                              */
    --callout-warning-bg: #fff8e6;       /* text 16.09                        */
    --callout-warning-border: #c2610a;   /* 3.96                              */
    --callout-success-bg: #ecfdf3;
    --callout-success-border: #15803d;   /* 4.76                              */
    --callout-error-bg: #fef2f2;
    --callout-error-border: #dc2626;     /* 4.41                              */

    /* --- Author colours (editor: <span data-color>, <mark data-color>) -----
       Text: on bg / surface (both #fff); every one is also ≥ 4.63 on
       surface-2, code bg and the four callout backgrounds.
       Highlights: --mark-text on each. */
    --text-red: #b91c1c;                 /* 6.47 */
    --text-orange: #c2410c;              /* 5.18 */
    --text-yellow: #975a07;              /* 5.55 */
    --text-green: #166534;               /* 7.13 */
    --text-teal: #0f766e;                /* 5.47 */
    --text-blue: #1d4ed8;                /* 6.70 */
    --text-violet: #6d28d9;              /* 7.10 */
    --text-pink: #be185d;                /* 6.04 */
    --text-gray: #4b5563;                /* 7.56 */

    --mark-text: #1a1c21;                /* on --color-mark 13.69             */
    --mark-red: #fecaca;                 /* mark-text 11.78 */
    --mark-orange: #fed7aa;              /* 12.59 */
    --mark-yellow: #fef08a;              /* 14.65 */
    --mark-green: #bbf7d0;               /* 14.07 */
    --mark-teal: #99f6e4;                /* 13.52 */
    --mark-blue: #bfdbfe;                /* 12.00 */
    --mark-violet: #ddd6fe;              /* 12.28 */
    --mark-pink: #fbcfe8;                /* 12.33 */
    --mark-gray: #e5e7eb;                /* 13.77 */

    /* --- Syntax highlighting (highlight.js scopes; on --color-code-bg) ----- */
    --hl-keyword: #cf222e;               /* 4.87 */
    --hl-title: #8250df;                 /* 4.58 */
    --hl-attr: #0550ae;                  /* 6.90 */
    --hl-string: #0a3069;                /* 11.64 */
    --hl-builtin: #953800;               /* 6.71 */
    --hl-comment: #57606a;               /* 5.81 */
    --hl-name: #116329;                  /* 6.72 */
    --hl-section: #0550ae;               /* 6.90 */
    --hl-bullet: #6c5300;                /* 6.64 */
    --hl-addition: #116329;              /* 6.64 on addition bg */
    --hl-addition-bg: #dafbe1;
    --hl-deletion: #82071e;              /* 9.16 on deletion bg */
    --hl-deletion-bg: #ffebe9;

    /* --- Elevation -------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 12px 24px -6px rgba(16, 24, 40, 0.14);
    --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, 0.25);

    /* --- Typography ------------------------------------------------------- */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", "Noto Sans Mono CJK SC", monospace;

    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md: 1.0625rem;   /* 17px — article body */
    --font-size-lg: 1.25rem;     /* 20px */
    --font-size-xl: 1.5rem;      /* 24px */
    --font-size-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
    --font-size-display: clamp(1.875rem, 1.35rem + 2.6vw, 3rem);

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-base: 1.6;

    /* Letter-spacing. Negative tracking suits Latin/Cyrillic display text;
       Chinese gets none (see :lang(zh) below). */
    --tracking-tight: -0.01em;
    --tracking-tighter: -0.02em;
    --tracking-tightest: -0.025em;
    --tracking-slight: 0.02em;           /* small pills and badges            */
    --tracking-wide: 0.04em;             /* small uppercase labels            */

    /* --- Spacing (4px grid) ----------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* --- Radii ------------------------------------------------------------ */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* --- Layout ----------------------------------------------------------- */
    --container-max: 1200px;
    --container-pad: clamp(1rem, 4vw, 2rem);
    --measure: 70ch;                     /* reading width of the article body */
    --toc-width: 15.5rem;
    --sidebar-width: 320px;              /* admin editor sidebar              */
    --header-height: 3.75rem;            /* 60px sticky header                */
    --tap-target: 44px;                  /* minimum touch target (WCAG 2.5.5) */
    --control-height: 2.5rem;            /* 40px inputs/buttons on desktop    */

    /* --- Layers ----------------------------------------------------------- */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-dropdown: 300;
    --z-overlay: 400;
    --z-toast: 500;
    --z-skip-link: 1000;

    /* --- Motion ----------------------------------------------------------- */
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 320ms;
    --duration-spin: 700ms;              /* one turn of a loading spinner     */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* --- Focus ------------------------------------------------------------ */
    --focus-width: 2px;
    --focus-offset: 2px;
}

/* Chinese (page or any element tagged zh / zh-CN …): CJK faces first so
   Latin fallbacks don't pick mismatched glyphs for punctuation; no negative
   tracking. base.css re-applies font-family on [lang|="zh"] elements. */
:lang(zh) {
    --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
        "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --tracking-tight: 0;
    --tracking-tighter: 0;
    --tracking-tightest: 0;
    --tracking-slight: 0;
    --tracking-wide: 0;
}

/* ------------------------------------------------------------------------
 * Dark theme — block 1 of 2: the system is dark and the visitor did not
 * pick light. Keep identical to block 2.
 * ------------------------------------------------------------------------ */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-bg: #0f1115;
        --color-canvas: #0f1115;
        --color-surface: #171a21;
        --color-surface-2: #1e222b;
        --color-header-bg: rgba(15, 17, 21, 0.86);
        --color-overlay: rgba(0, 0, 0, 0.6);

        --color-border: #2a2f3a;
        --color-border-strong: #66707f;      /* 3.47 on surface, 3.18 on surface-2 */

        --color-text: #e6e8ec;               /* 15.40 on bg, 14.19 on surface */
        --color-text-muted: #9ba3b0;         /* 7.43 on bg, 6.26 on surface-2 */

        --color-primary: #8b93f8;            /* 6.86 on bg, 6.32 on surface   */
        --color-primary-hover: #a5acfa;      /* 8.89 on bg                    */
        --color-primary-contrast: #0c0e1f;   /* 6.94 on primary               */
        --color-primary-soft: #22264a;       /* primary-hover on it: 6.84     */

        --color-danger: #f87171;             /* 6.83 on bg, 6.19 on error bg  */
        --color-danger-hover: #fa8f8f;
        --color-danger-contrast: #1a0505;    /* 7.11 on danger                */
        --color-success: #4ade80;            /* 10.84 on bg                   */
        --color-warning: #fbbf24;            /* 11.32 on bg                   */
        --color-info: #38bdf8;               /* 8.82 on bg                    */

        --color-hover: rgba(255, 255, 255, 0.07);
        --color-active: rgba(255, 255, 255, 0.12);
        --color-focus-ring: #a5acfa;         /* 8.89 on bg, 8.19 on surface   */
        --color-selection: rgba(139, 147, 248, 0.32);

        --color-code-bg: #161b22;
        --color-code-text: #d1d7e0;          /* 11.95 on code bg              */
        --color-mark: #5b4a12;               /* mark-text 7.84                */
        --color-video-bg: #000000;
        --color-find-match: #4a3d0f;         /* text 8.71                     */
        --color-find-current: #9a3412;       /* text 5.96                     */

        --callout-info-bg: #1a1f3d;
        --callout-info-border: #818cf8;      /* 5.39 */
        --callout-warning-bg: #2a2112;
        --callout-warning-border: #fbbf24;   /* 9.50 */
        --callout-success-bg: #10261b;
        --callout-success-border: #4ade80;   /* 9.16 */
        --callout-error-bg: #2c1517;
        --callout-error-border: #f87171;     /* 6.19 */

        /* on bg / on surface; all ≥ 5.7 on surface-2, code bg, callouts */
        --text-red: #f87171;                 /* 6.83 / 6.29 */
        --text-orange: #fb923c;              /* 8.35 / 7.69 */
        --text-yellow: #facc15;              /* 12.34 / 11.37 */
        --text-green: #4ade80;               /* 10.84 / 9.99 */
        --text-teal: #2dd4bf;                /* 10.15 / 9.35 */
        --text-blue: #60a5fa;                /* 7.43 / 6.85 */
        --text-violet: #a78bfa;              /* 6.94 / 6.40 */
        --text-pink: #f472b6;                /* 7.13 / 6.57 */
        --text-gray: #9ca3af;                /* 7.44 / 6.86 */

        --mark-text: #f3f4f6;                /* on --color-mark 7.84          */
        --mark-red: #7f1d1d;                 /* 9.10 */
        --mark-orange: #7c2d12;              /* 8.51 */
        --mark-yellow: #713f12;              /* 7.88 */
        --mark-green: #14532d;               /* 8.28 */
        --mark-teal: #134e4a;                /* 8.61 */
        --mark-blue: #1e3a8a;                /* 9.41 */
        --mark-violet: #4c1d95;              /* 9.95 */
        --mark-pink: #831843;                /* 8.77 */
        --mark-gray: #374151;                /* 9.37 */

        --hl-keyword: #ff7b72;               /* 6.86 */
        --hl-title: #d2a8ff;                 /* 8.88 */
        --hl-attr: #79c0ff;                  /* 8.89 */
        --hl-string: #a5d6ff;                /* 11.25 */
        --hl-builtin: #ffa657;               /* 8.93 */
        --hl-comment: #8b949e;               /* 5.62 */
        --hl-name: #7ee787;                  /* 11.26 */
        --hl-section: #58a6ff;               /* 6.85 */
        --hl-bullet: #f2cc60;                /* 11.19 */
        --hl-addition: #aff5b4;              /* 10.21 on addition bg */
        --hl-addition-bg: #033a16;
        --hl-deletion: #ffdcd7;              /* 10.24 on deletion bg */
        --hl-deletion-bg: #67060c;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 12px 24px -6px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.7);
    }
}

/* Dark theme — block 2 of 2: explicit choice. Keep identical to block 1. */
@media screen {
    :root[data-theme="dark"] {
        color-scheme: dark;

        --color-bg: #0f1115;
        --color-canvas: #0f1115;
        --color-surface: #171a21;
        --color-surface-2: #1e222b;
        --color-header-bg: rgba(15, 17, 21, 0.86);
        --color-overlay: rgba(0, 0, 0, 0.6);

        --color-border: #2a2f3a;
        --color-border-strong: #66707f;

        --color-text: #e6e8ec;
        --color-text-muted: #9ba3b0;

        --color-primary: #8b93f8;
        --color-primary-hover: #a5acfa;
        --color-primary-contrast: #0c0e1f;
        --color-primary-soft: #22264a;

        --color-danger: #f87171;
        --color-danger-hover: #fa8f8f;
        --color-danger-contrast: #1a0505;
        --color-success: #4ade80;
        --color-warning: #fbbf24;
        --color-info: #38bdf8;

        --color-hover: rgba(255, 255, 255, 0.07);
        --color-active: rgba(255, 255, 255, 0.12);
        --color-focus-ring: #a5acfa;
        --color-selection: rgba(139, 147, 248, 0.32);

        --color-code-bg: #161b22;
        --color-code-text: #d1d7e0;
        --color-mark: #5b4a12;
        --color-video-bg: #000000;
        --color-find-match: #4a3d0f;
        --color-find-current: #9a3412;

        --callout-info-bg: #1a1f3d;
        --callout-info-border: #818cf8;
        --callout-warning-bg: #2a2112;
        --callout-warning-border: #fbbf24;
        --callout-success-bg: #10261b;
        --callout-success-border: #4ade80;
        --callout-error-bg: #2c1517;
        --callout-error-border: #f87171;

        --text-red: #f87171;
        --text-orange: #fb923c;
        --text-yellow: #facc15;
        --text-green: #4ade80;
        --text-teal: #2dd4bf;
        --text-blue: #60a5fa;
        --text-violet: #a78bfa;
        --text-pink: #f472b6;
        --text-gray: #9ca3af;

        --mark-text: #f3f4f6;
        --mark-red: #7f1d1d;
        --mark-orange: #7c2d12;
        --mark-yellow: #713f12;
        --mark-green: #14532d;
        --mark-teal: #134e4a;
        --mark-blue: #1e3a8a;
        --mark-violet: #4c1d95;
        --mark-pink: #831843;
        --mark-gray: #374151;

        --hl-keyword: #ff7b72;
        --hl-title: #d2a8ff;
        --hl-attr: #79c0ff;
        --hl-string: #a5d6ff;
        --hl-builtin: #ffa657;
        --hl-comment: #8b949e;
        --hl-name: #7ee787;
        --hl-section: #58a6ff;
        --hl-bullet: #f2cc60;
        --hl-addition: #aff5b4;
        --hl-addition-bg: #033a16;
        --hl-deletion: #ffdcd7;
        --hl-deletion-bg: #67060c;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 12px 24px -6px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.7);
    }
}

/* ------------------------------------------------------------------------
 * "Increase contrast" (macOS/iOS, Windows contrast themes report "more"):
 * stronger lines, darker secondary text, thicker focus ring.
 * ------------------------------------------------------------------------ */
@media (prefers-contrast: more) {
    :root {
        --color-border: #7d8490;
        --color-border-strong: #4b515c;
        --color-text: #000000;
        --color-text-muted: #3b404a;         /* 10.4 on bg */
        --color-hover: rgba(0, 0, 0, 0.1);
        --focus-width: 3px;
    }
}
@media screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-border: #66707f;
        --color-border-strong: #9aa3b2;
        --color-text: #ffffff;
        --color-text-muted: #c3c9d3;
        --color-hover: rgba(255, 255, 255, 0.14);
    }
}
@media screen and (prefers-contrast: more) {
    :root[data-theme="dark"] {
        --color-border: #66707f;
        --color-border-strong: #9aa3b2;
        --color-text: #ffffff;
        --color-text-muted: #c3c9d3;
        --color-hover: rgba(255, 255, 255, 0.14);
    }
}

/* Motion off: every transition built on these tokens becomes instant. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
}

/* Print: the dark blocks are screen-only, so paper always gets the light set;
   only flatten surfaces and push text to black here. */
@media print {
    :root {
        --color-bg: #ffffff;
        --color-canvas: #ffffff;
        --color-surface: #ffffff;
        --color-surface-2: #ffffff;
        --color-border: #bbbbbb;
        --color-border-strong: #777777;
        --color-text: #000000;
        --color-text-muted: #444444;
        --color-primary: #000000;
        --color-primary-hover: #000000;
        --color-code-bg: #f4f4f4;
        --color-code-text: #000000;
        --callout-info-bg: #ffffff;
        --callout-warning-bg: #ffffff;
        --callout-success-bg: #ffffff;
        --callout-error-bg: #ffffff;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
    }
}