@layer tokens, reset, themes, base, components, utilities;

@layer tokens {

    /* Design tokens */
    :root {
        /* font */
        --font-family-base: "Source Sans Pro", sans-serif;

        /* font weights */
        --font-weight-regular: 400;
        --font-weight-semibold: 700;
        --font-weight-extrabold: 800;
        --font-weight-bold: 900;

        /* font sizes */
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.5rem;
        --text-2xl: 2rem;
        --text-4xl: 3rem;

        --font-size-title-xl: var(--text-2xl);
        --font-size-title-lg: var(--text-xl);
        --font-size-title-md: var(--text-lg);
        --font-size-title-sm: var(--text-lg);
        /* used for section headings and card titles */

        --font-size-body-lg: var(--text-lg);
        --font-size-body: var(--text-base);
        --font-size-body-small: var(--text-sm);
        --font-size-meta: var(--text-xs);
        --font-size-xs: var(--text-xs);
        --font-size-label: var(--text-sm);
        --font-size-button: var(--text-sm);
        --font-size-fixed-xs: var(--text-xs);
        --font-size-fixed-meta: var(--text-xs);
        --font-size-fixed-sm: var(--text-sm);
        --font-size-fixed-md: var(--text-lg);

        /* line heights */
        --leading-badge: 0.48rem;
        --leading-none: 1;
        --leading-tight: 1.1;
        --leading-compact: 1.15;
        --leading-title: 1.2;
        --leading-snug: 1.25;
        --leading-ui: 1.3;
        --leading-normal: 1.35;
        --leading-comfortable: 1.4;
        --leading-body: 1.5;
        --leading-reading: 1.55;
        --leading-relaxed: 1.6;
        --leading-loose: 1.75;
        --line-height-title: var(--leading-title);
        --line-height-body: var(--leading-relaxed);
        --line-height-body-relaxed: var(--leading-loose);
        --line-height-ui: var(--leading-comfortable);

        /* spacing */
        --space-2: 0.125rem;
        --space-4: 0.25rem;
        --space-8: 0.5rem;
        --space-12: 0.75rem;
        --space-16: 1rem;
        --space-20: 1.25rem;
        --space-24: 1.5rem;
        --space-26: 1.625rem;
        --space-32: 2rem;
        --space-40: 2.5rem;
        --space-48: 3rem;
        --space-56: 3.5rem;
        --space-64: 4rem;
        --space-5: 0.3125rem;
        --space-6: 0.375rem;
        --space-10: 0.625rem;
        --space-13: 0.8125rem;
        --space-14: 0.875rem;
        --space-15: 0.9375rem;
        --space-18: 1.125rem;
        --space-28: 1.75rem;
        --space-34: 2.125rem;
        --space-36: 2.25rem;
        --space-38: 2.375rem;
        --space-46: 2.875rem;
        --space-80: 5rem;
        --space-96: 6rem;
        --border-width-hairline: 0.0625rem;
        --border-width-default: 0.125rem;
        --space-80p: 0.8rem;
        --input-autofill-shadow-size: 62.5rem;

        /* radius */
        --radius-corner-m: .7rem;
        --radius-corner: 1.25rem;
        --radius-round: 9999rem;

        /* layout */
        --anchor-offset: 3.5rem;

        /* brand */
        --color-brand-primary: oklch(83.64% 0.192 94.8);
        --color-brand-primary-hover: color-mix(in oklch, var(--color-brand-primary) 82%, black);
        --button-hover-line-color: color-mix(in oklch, var(--color-brand-primary) 48%, transparent);
        --button-hover-line-offset: -0.0625rem;
        --color-brand-secondary: oklch(30.95% 0.055 265.2);

        /* neutrals */
        --color-white: oklch(100% 0 0);
        --color-black: oklch(0% 0 0);
        --color-neutral-50: oklch(98.5% 0.003 255);
        --color-neutral-100: oklch(96.6% 0 0);
        --color-neutral-200: oklch(93% 0.004 255);
        --color-neutral-300: oklch(87% 0.006 255);
        --color-neutral-400: oklch(78% 0.01 255);
        --color-neutral-500: oklch(68% 0.008 255);
        --color-neutral-600: oklch(52% 0.016 255);
        --color-neutral-700: oklch(38% 0.02 255);
        --color-neutral-800: oklch(31% 0.02 255);
        --color-neutral-900: oklch(20% 0.01 255);
        --color-neutral-950: oklch(13% 0.01 255);

        /* base text and surfaces */
        --color-bg: var(--color-neutral-100);
        --color-bg-surface: var(--color-white);
        --color-bg-surface-alt: var(--color-neutral-200);
        --color-bg-surface-raised: var(--color-white);
        --color-card-bg: var(--color-bg-surface-raised);
        --color-card-bg-hover: var(--color-bg-surface);
        --color-card-border: var(--color-neutral-200);
        --color-card-header-bg: var(--color-neutral-50);
        --color-dropdown-bg: var(--color-neutral-50);
        --color-dropdown-text: var(--color-neutral-900);
        --color-dropdown-border: var(--color-ink-alpha-08);
        --color-dropdown-shadow: rgba(15, 23, 42, .12);
        --color-control-bg: var(--color-neutral-100);
        --color-control-hover-bg: var(--color-neutral-200);
        --color-control-text: var(--color-neutral-900);
        --color-scrollbar-track: var(--color-neutral-200);
        --color-scrollbar-thumb: var(--color-neutral-300);
        --color-bg-surface-soft: rgb(248 250 252 / 0.88);
        --color-bg-surface-translucent: rgb(255 255 255 / 0.92);
        --color-bg-overlay: rgb(15 23 42 / 0.42);
        --color-bg-overlay-strong: rgb(15 23 42 / 0.88);
        --color-bg-overlay-image: rgb(9 9 11 / 0.66);
        --color-bg-overlay-image-strong: rgb(0 0 0 / 0.62);
        --color-bg-subtle-tint: rgb(237 244 248);
        --color-bg-warning-soft: rgb(255 242 204);
        --color-bg-success-soft: rgb(232 249 236);
        --color-bg-chip: rgb(241 245 249);
        --color-bg-chip-hover: rgb(226 232 240);
        --color-bg-interactive-subtle: rgb(9 9 11 / 0.03);
        --color-bg-interactive-muted: rgb(15 23 42 / 0.06);
        --color-bg-frosted: rgb(255 255 255 / 0.72);
        --color-bg-frosted-strong: rgb(255 255 255 / 0.86);
        --color-bg-frosted-solid: rgb(255 255 255 / 0.95);
        --color-bg-on-dark-subtle: rgb(255 255 255 / 0.06);
        --color-bg-on-dark-muted: rgb(255 255 255 / 0.16);
        --color-bg-on-dark-hover: rgb(255 255 255 / 0.38);
        --color-bg-on-dark-active: rgb(255 255 255 / 0.45);
        --color-bg-on-dark-tint: rgb(255 255 255 / 0.42);
        --color-text-strong: rgb(15 23 42);
        --color-text-subtle: rgb(71 85 105);
        --color-text-faint: rgb(100 116 139);
        --color-text-meta: rgb(118 126 157);
        --color-text-on-image: rgb(255 255 255);
        --color-text-on-image-muted: rgb(255 255 255 / 0.70);
        --color-text-on-image-soft: rgb(255 255 255 / 0.62);
        --color-text-on-image-subtle: rgb(203 213 225);
        --color-text-header-control: #111;
        --color-text-header-control-muted: rgba(17, 17, 17, .56);
        --color-text-header-control-soft: rgba(17, 17, 17, .68);
        --color-text: var(--color-black);
        --color-text-muted: var(--color-neutral-700);
        --color-text-soft: var(--color-neutral-500);
        --color-text-inverse: var(--color-white);
        --color-border: color-mix(in oklch, var(--color-text) 14%, transparent);
        --color-link: var(--color-neutral-800);
        --color-link-hover: color-mix(in oklch, var(--color-link) 82%, white);
        --color-black-alpha-12: rgba(0, 0, 0, 0.12);
        --color-black-alpha-08: rgba(0, 0, 0, .08);
        --color-black-alpha-06: rgba(0, 0, 0, .06);
        --color-ink-alpha-18: rgba(17, 17, 17, .18);
        --color-ink-alpha-12: rgba(17, 17, 17, .12);
        --color-ink-alpha-08: rgba(17, 17, 17, .08);
        --color-white-alpha-78: rgba(255, 255, 255, .78);
        --color-shadow-soft: rgb(15 23 42 / 0.08);
        --color-shadow-medium: rgb(15 23 42 / 0.12);
        --color-shadow-strong: rgb(15 23 42 / 0.16);
        --color-shadow-modal: rgba(15, 23, 42, .24);
        --color-shadow-black-soft: rgb(0 0 0 / 0.08);
        --color-border-subtle: rgb(15 23 42 / 0.08);
        --color-border-medium: rgb(15 23 42 / 0.12);
        --color-border-on-dark: rgb(255 255 255 / 0.12);
        --color-border-on-dark-strong: rgb(255 255 255 / 0.24);
        --color-focus-gold: rgb(252 211 77 / 0.38);
        --color-rating-ring: rgb(248 185 0 / 0.2);
        --color-danger-ring: rgb(198 40 40 / 0.16);
        --color-shimmer: rgb(255 255 255 / 0.36);
        --color-hero-panel-bg: linear-gradient(135deg, rgb(6 11 15), rgb(13 19 26) 58%, rgb(3 8 12));
        --color-hero-panel-sheen: radial-gradient(70% 100% at 15% 25%, rgb(255 255 255 / 8%), transparent 62%);
        --color-heading: var(--color-text);
        --color-zinc-950: rgb(9 9 11);
        --color-red-400: #f87171;

        --comments-border: rgb(15 23 42 / 0.1);
        --comments-border-strong: rgb(15 23 42 / 0.14);
        --comments-muted: rgb(93 104 126);
        --comments-soft: rgb(255 255 255 / 0.9);
        --comments-shadow: 0 0.75rem 2rem rgb(15 23 42 / 0.08);

        /* ui contrast tokens */
        --color-ui-contrast: var(--color-neutral-900);
        --color-ui-contrast-hover: var(--color-neutral-800);
        --color-media-placeholder-bg: var(--color-neutral-900);
        --color-disabled-fg: color-mix(in oklch, var(--color-text) 55%, transparent);

        /* content colors */
        --color-content-news: oklch(57.49% .0918 222.5);
        --color-content-review: oklch(55.42% .1527 28.67);
        --color-content-article: oklch(48.6% .1067 306.9);
        --color-content-video: oklch(63.5% .1238 180.5);
        --color-content-breaking: oklch(59.78% .214 28.32);
        --color-content-liveblog: oklch(59% .14 145);
        --color-content-dossier: oklch(48% .09 184);

        /* status and accents */
        --color-danger: oklch(0.55 0.2 28);
        --color-danger-hover: oklch(0.48 0.19 28);
        --color-danger-static: #c62828;
        --color-danger-static-hover: #a91f1f;
        --color-success: oklch(0.72 0.19 145);
        --color-success-strong: oklch(0.5 0.13 145);
        --color-accent-violet: oklch(0.64 0.2 312);
        --color-accent-indigo: oklch(0.62 0.14 278);
        --color-accent-indigo-hover: oklch(0.74 0.03 260);
        --color-accent-gold: rgb(189 157 104);
        --color-accent-gold-dark: rgb(162 120 61);
        --color-rating: var(--color-brand-primary);

        /* themed ui */
        --color-header-bg: var(--color-brand-primary);
        --color-header-text: var(--color-neutral-900);
        --color-header-text-hover: var(--color-neutral-800);
        --color-notification-badge-bg: var(--color-neutral-900);
        --color-notification-badge-text: var(--color-white);
        --color-badge-platform-bg: rgb(40 40 40);
        --color-badge-platform-text: var(--color-white);
        --color-badge-platform-empty-bg: rgb(222 222 222);
        --color-badge-platform-empty-text: rgb(40 40 40);
        --color-home-gradient: linear-gradient(to top, var(--color-brand-secondary), rgb(40 40 40));

        /* form tokens */
        --input-bg: var(--color-bg-surface);
        --input-color: var(--color-text);
        --input-border: var(--color-border);
        --input-border-focus: var(--color-brand-primary);
        --input-placeholder: var(--color-text-muted);

        /* buttons */
        --btn-height: 2.75rem;
        --btn-icon-only-size: 2.75rem;
        --btn-padding-x: 0.75rem;
        --btn-gap: 0.35rem;
        --btn-radius: var(--radius-6);
        --btn-border-width: var(--border-width-hairline);
        --btn-font-size: var(--text-sm);
        --btn-font-weight: var(--font-weight-semibold);
        --btn-line-height: var(--leading-none);
        --btn-icon-size: 1rem;
        --btn-transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.2s ease;
        --btn-focus-ring-width: var(--space-2);
        --btn-focus-ring-offset: var(--space-2);
        --btn-focus-ring: oklch(0.56 0.05 255 / 0.35);

        --btn-primary-bg: var(--color-ui-contrast);
        --btn-primary-border: var(--color-ui-contrast);
        --btn-primary-text: var(--color-text-inverse);
        --btn-primary-hover-bg: var(--color-ui-contrast-hover);
        --btn-primary-hover-border: var(--color-ui-contrast-hover);
        --btn-primary-hover-text: var(--color-text-inverse);

        --btn-secondary-bg: var(--color-neutral-200);
        --btn-secondary-border: var(--color-neutral-300);
        --btn-secondary-text: var(--color-neutral-900);
        --btn-secondary-hover-bg: var(--color-neutral-300);
        --btn-secondary-hover-border: var(--color-neutral-400);
        --btn-secondary-hover-text: var(--color-neutral-900);

        --btn-ghost-bg: transparent;
        --btn-ghost-border: var(--color-neutral-400);
        --btn-ghost-text: var(--color-ui-contrast);
        --btn-ghost-hover-bg: var(--color-neutral-50);
        --btn-ghost-hover-border: var(--color-neutral-500);
        --btn-ghost-hover-text: var(--color-ui-contrast);

        --btn-danger-bg: var(--color-danger);
        --btn-danger-border: var(--color-danger);
        --btn-danger-text: var(--color-text-inverse);
        --btn-danger-hover-bg: var(--color-danger-hover);
        --btn-danger-hover-border: var(--color-danger-hover);
        --btn-danger-hover-text: var(--color-text-inverse);

        --btn-disabled-bg: var(--color-neutral-200);
        --btn-disabled-border: var(--color-neutral-300);
        --btn-disabled-text: var(--color-neutral-500);
    }
}

@layer reset {

    /* Box model and default element reset */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        margin: 0;
        padding: 0;
    }

    html:focus-within {
        scroll-behavior: smooth;
    }

    html {
        scroll-padding-top: var(--anchor-offset);
    }

    picture,
    svg {
        max-width: 100%;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    li,
    ul[role="list"],
    ol[role="list"] {
        list-style: none;
    }

    a {
        color: var(--color-link);
        text-decoration: none;
    }

    a:not([class]) {
        text-decoration-skip-ink: auto;
    }

    a:hover,
    a:focus-visible {
        color: var(--color-link-hover);
    }

    button {
        padding: 0;
        border: 0;
        outline: inherit;
        background: none;
        font: inherit;
        cursor: pointer;
    }
}

@layer themes {

    /* Theme color assignments */
    :root,
    :root[data-theme="light"] {
        color-scheme: light;
    }

    :root[data-theme="dark"],
    [color-scheme="dark"] {

        --btn-disabled-bg: oklch(34% 0.012 255);
        --btn-disabled-border: oklch(42% 0.012 255);
        --btn-disabled-text: oklch(68% 0.008 255);

        --btn-ghost-border: color-mix(in oklch, var(--color-white) 35%, transparent);
        --btn-ghost-hover-bg: color-mix(in oklch, var(--color-white) 10%, transparent);
        --btn-ghost-hover-border: color-mix(in oklch, var(--color-white) 45%, transparent);
        --btn-ghost-hover-text: var(--color-brand-primary);
        --btn-ghost-text: var(--color-white);

        --btn-primary-bg: var(--color-white);
        --btn-primary-border: var(--color-white);
        --btn-primary-hover-bg: oklch(92% 0.004 255);
        --btn-primary-hover-border: oklch(92% 0.004 255);
        --btn-primary-hover-text: var(--color-black);
        --btn-primary-text: var(--color-black);

        --btn-secondary-bg: oklch(34% 0.012 255);
        --btn-secondary-border: oklch(42% 0.012 255);
        --btn-secondary-hover-bg: oklch(40% 0.012 255);
        --btn-secondary-hover-border: oklch(48% 0.012 255);
        --btn-secondary-hover-text: var(--color-white);
        --btn-secondary-text: var(--color-white);

        --color-bg: oklch(23.503% 0.00003 271.152);
        --color-bg-surface: oklch(26% 0.01 255);
        --color-bg-surface-alt: oklch(34% 0.012 255);
        --color-border: color-mix(in oklch, var(--color-text) 16%, transparent);
        --color-header-bg: var(--color-brand-secondary);
        --color-header-text: var(--color-white);
        --color-header-text-hover: var(--color-brand-primary);
        --color-home-gradient: linear-gradient(to top, var(--color-brand-secondary), rgb(40 40 40));
        --color-link: var(--color-white);
        --color-link-hover: var(--color-brand-primary);
        --color-notification-badge-bg: var(--color-brand-primary);
        --color-notification-badge-text: var(--color-black);
        --color-text: var(--color-white);
        --color-text-muted: oklch(82% 0.01 255);
        --color-text-soft: oklch(72% 0.01 255);
        --color-ui-contrast: var(--color-white);
        --color-ui-contrast-hover: oklch(92% 0.004 255);

        --input-bg: var(--color-bg-surface);
        --input-border: var(--color-border);
        --input-border-focus: var(--color-brand-primary);
        --input-color: var(--color-text);
        --input-placeholder: var(--color-text-muted);

        --color-bg-surface-raised: oklch(29% 0.012 255);
        --color-bg-surface-soft: oklch(24% 0.012 255 / 0.88);
        --color-bg-surface-translucent: oklch(27% 0.012 255 / 0.94);
        --color-bg-overlay: rgb(0 0 0 / 0.58);
        --color-bg-overlay-strong: rgb(0 0 0 / 0.74);
        --color-bg-overlay-image: rgb(0 0 0 / 0.72);
        --color-bg-overlay-image-strong: rgb(0 0 0 / 0.76);
        --color-bg-subtle-tint: oklch(24% 0.014 255);
        --color-bg-warning-soft: color-mix(in oklch, var(--color-brand-primary) 18%, var(--color-bg-surface));
        --color-bg-success-soft: color-mix(in oklch, var(--color-success) 18%, var(--color-bg-surface));
        --color-bg-chip: oklch(31% 0.012 255);
        --color-bg-chip-hover: oklch(37% 0.014 255);
        --color-bg-interactive-subtle: rgb(255 255 255 / 0.06);
        --color-bg-interactive-muted: rgb(255 255 255 / 0.10);
        --color-bg-frosted: oklch(25% 0.012 255 / 0.84);
        --color-bg-frosted-strong: oklch(28% 0.012 255 / 0.90);
        --color-bg-frosted-solid: oklch(30% 0.012 255);
        --color-bg-on-dark-subtle: rgb(255 255 255 / 0.08);
        --color-bg-on-dark-muted: rgb(255 255 255 / 0.14);
        --color-bg-on-dark-hover: rgb(255 255 255 / 0.22);
        --color-bg-on-dark-active: rgb(255 255 255 / 0.30);
        --color-bg-on-dark-tint: rgb(255 255 255 / 0.18);
        --color-text-strong: var(--color-text);
        --color-text-subtle: var(--color-text-muted);
        --color-text-faint: var(--color-text-soft);
        --color-text-meta: var(--color-text-soft);
        --color-text-on-image: var(--color-white);
        --color-text-on-image-muted: rgb(255 255 255 / 0.76);
        --color-text-on-image-soft: rgb(255 255 255 / 0.68);
        --color-text-on-image-subtle: rgb(226 232 240);
        --color-text-header-control: var(--color-header-text);
        --color-text-header-control-muted: color-mix(in oklch, var(--color-header-text) 72%, transparent);
        --color-text-header-control-soft: color-mix(in oklch, var(--color-header-text) 84%, transparent);
        --comments-border: color-mix(in oklch, var(--color-text) 14%, transparent);
        --comments-border-strong: color-mix(in oklch, var(--color-text) 22%, transparent);
        --comments-muted: var(--color-text-muted);
        --comments-soft: var(--color-bg-surface-translucent);
        --comments-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.32);
        --color-shadow-soft: rgb(0 0 0 / 0.28);
        --color-shadow-medium: rgb(0 0 0 / 0.36);
        --color-shadow-strong: rgb(0 0 0 / 0.44);
        --color-shadow-modal: rgb(0 0 0 / 0.58);
        --color-shadow-black-soft: rgb(0 0 0 / 0.34);
        --color-border-subtle: color-mix(in oklch, var(--color-text) 10%, transparent);
        --color-border-medium: color-mix(in oklch, var(--color-text) 16%, transparent);
        --color-border-on-dark: rgb(255 255 255 / 0.14);
        --color-border-on-dark-strong: rgb(255 255 255 / 0.24);
        --color-card-bg: oklch(18% 0.018 255);
        --color-card-bg-hover: oklch(22% 0.02 255);
        --color-card-border: rgb(255 255 255 / 0.14);
        --color-card-header-bg: oklch(21% 0.018 255);
        --color-dropdown-bg: oklch(20% 0.018 255);
        --color-dropdown-text: var(--color-text-strong);
        --color-dropdown-border: rgb(255 255 255 / 0.14);
        --color-dropdown-shadow: rgb(0 0 0 / 0.48);
        --color-control-bg: oklch(24% 0.018 255);
        --color-control-hover-bg: oklch(29% 0.02 255);
        --color-control-text: var(--color-text-strong);
        --color-scrollbar-track: rgb(255 255 255 / 0.12);
        --color-scrollbar-thumb: rgb(255 255 255 / 0.48);
        --color-badge-platform-text: var(--color-white);
        --color-badge-platform-empty-bg: var(--color-card-bg);
        --color-badge-platform-empty-text: var(--color-white);
        --color-zinc-950: var(--color-bg-overlay-strong);
        color-scheme: dark;
    }
}

@layer base {

    /* Document defaults */
    body {
        min-height: 100vh;
        background-color: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-family-base);
        font-size: var(--text-base);
        line-height: var(--leading-body);
        text-rendering: optimizeSpeed;
    }

    body.no-scroll {
        overflow: hidden;
        height: 100vh;
    }

    h1 {
        font-size: var(--text-2xl);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-title);
    }

    h2 {
        font-size: var(--text-xl);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-ui);
    }

    h3 {
        font-size: var(--text-lg);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-comfortable);
    }

    h1+ul {
        display: grid;
        margin-block: var(--space-26);
    }

    h1,
    h2,
    h3,
    h4 {
        text-wrap: balance;
    }

    html:focus-within {

        @media (prefers-reduced-motion: reduce) {
            scroll-behavior: auto;
        }
    }

    *,
    *::before,
    *::after {

        @media (prefers-reduced-motion: reduce) {
            scroll-behavior: auto !important;
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
        }
    }

    @media (prefers-reduced-motion: no-preference) {

        :root.is-theme-switching,
        :root.is-theme-switching body,
        :root.is-theme-switching body *,
        :root.is-theme-switching body *::before,
        :root.is-theme-switching body *::after {
            transition-property: background-color, border-color, color, fill, stroke, box-shadow, outline-color, text-decoration-color;
            transition-duration: 0.24s;
            transition-timing-function: ease;
        }
    }

    main:has(aside) {
        @media (min-width: 1200px) {
            grid-template-columns: 75% 23.4%;
        }
    }
}