/**
 * MakkiPlay Design System primitives.
 *
 * Ownership rules:
 * - Core settings own configurable color/geometry primitives.
 * - This file owns semantic aliases, typography roles, spacing, motion and
 *   elevation tokens.
 * - Component styles consume semantic tokens; they do not redefine the
 *   configurable primitives.
 *
 * Responsive layout bands used by new/rewritten components:
 * compact <= 480px, mobile <= 760px, tablet <= 960px,
 * compact desktop <= 1180px, full desktop > 1180px.
 * Components may keep a content-driven micro-breakpoint when geometry truly
 * requires it; those are component contracts, not a second global system.
 */
:root{
  /* Configurable primitives: defaults are overridden by saved settings. */
  --mp-accent:#ff0032;
  --mp-accent-ink:#111317;
  --mp-accent-text-light:#d6002a;
  --mp-accent-text-dark:#ff4768;
  --mp-accent-text:var(--mp-accent-text-light);
  --mp-selected:#ff0032;
  --mp-selected-ink:#111317;
  --mp-button-ink:var(--mp-selected-ink);
  --mp-dark-bg:#0d1014;
  --mp-dark-surface:#151a20;
  --mp-dark-surface-2:#1c232b;
  --mp-dark-text:#f7f8fa;
  --mp-dark-muted:#a5adb8;
  --mp-light-bg:#fff;
  --mp-light-surface:#f4f5f7;
  --mp-light-surface-2:#e9ecef;
  --mp-light-text:#171a1f;
  --mp-light-muted:#66707c;
  --mp-container:1280px;
  --mp-home-container:1424px;
  --mp-series-container:1488px;
  --mp-series-rail:348px;
  --mp-news-container:1320px;
  --mp-schedule-container:1440px;
  --mp-schedule-visible-days:5;
  --mp-radius-media:6px;
  --mp-radius-card:8px;
  --mp-radius-control:8px;
  --mp-radius-dialog:16px;

  /* Typography scale primitives. Component CSS references these values so
     visual calibration has one source of truth without changing geometry. */
  --mp-fs-8:8px;
  --mp-fs-9:9px;
  --mp-fs-10:10px;
  --mp-fs-11:11px;
  --mp-fs-12:12px;
  --mp-fs-13:13px;
  --mp-fs-14:14px;
  --mp-fs-15:15px;
  --mp-fs-16:16px;
  --mp-fs-17:17px;
  --mp-fs-18:18px;
  --mp-fs-19:19px;
  --mp-fs-20:20px;
  --mp-fs-21:21px;
  --mp-fs-22:22px;
  --mp-fs-23:23px;
  --mp-fs-24:24px;
  --mp-fs-25:25px;
  --mp-fs-26:26px;
  --mp-fs-29:29px;
  --mp-fs-30:30px;
  --mp-fs-31:31px;
  --mp-fs-32:32px;
  --mp-fs-34:34px;
  --mp-fs-36:36px;
  --mp-fs-fluid-card-title:clamp(18px,1.65vw,23px);
  --mp-fs-fluid-dialog-title:clamp(22px,3vw,28px);
  --mp-fs-fluid-home-compact:clamp(22px,7.4vw,28px);
  --mp-fs-home-hero:clamp(28px,2vw,32px);
  --mp-fs-home-hero-mobile:clamp(20px,5.7vw,23px);
  --mp-fs-home-rank:96px;
  --mp-fs-home-rank-mobile:76px;
  --mp-fs-fluid-detail-mobile:clamp(24px,7.2vw,30px);
  --mp-fs-fluid-home-hero:clamp(26px,2.15vw,var(--mp-type-hero-size));
  --mp-fs-fluid-news-mobile:clamp(22px,6vw,26px);
  --mp-fs-fluid-auth-title:clamp(29px,5vw,38px);
  --mp-fs-fluid-news-title:clamp(31px,3.5vw,49px);
  --mp-fs-fluid-article-mobile:clamp(34px,10vw,48px);
  --mp-fs-fluid-schedule-title:clamp(34px,3.45vw,46px);
  --mp-fs-fluid-page-title:clamp(34px,4vw,52px);
  --mp-fs-fluid-rating-star:clamp(34px,8vw,46px);
  --mp-fs-fluid-detail-hero:clamp(36px,2.1vw,40px);
  --mp-fs-fluid-archive-title:clamp(36px,5vw,58px);
  --mp-fs-fluid-person-title:clamp(38px,5vw,58px);
  --mp-fs-fluid-feature-title:clamp(38px,5vw,64px);
  --mp-weight-regular:400;
  --mp-weight-medium:500;
  --mp-weight-semibold:600;
  --mp-weight-bold:700;
  --mp-weight-extrabold:800;
  --mp-lh-zero:0;
  --mp-lh-088:.88;
  --mp-lh-1:1;
  --mp-lh-102:1.02;
  --mp-lh-103:1.03;
  --mp-lh-105:1.05;
  --mp-lh-106:1.06;
  --mp-lh-108:1.08;
  --mp-lh-11:1.1;
  --mp-lh-115:1.15;
  --mp-lh-116:1.16;
  --mp-lh-12:1.2;
  --mp-lh-122:1.22;
  --mp-lh-125:1.25;
  --mp-lh-126:1.26;
  --mp-lh-127:1.27;
  --mp-lh-128:1.28;
  --mp-lh-13:1.3;
  --mp-lh-132:1.32;
  --mp-lh-135:1.35;
  --mp-lh-14:1.4;
  --mp-lh-142:1.42;
  --mp-lh-145:1.45;
  --mp-lh-148:1.48;
  --mp-lh-15:1.5;
  --mp-lh-155:1.55;
  --mp-lh-158:1.58;
  --mp-lh-16:1.6;
  --mp-lh-172:1.72;
  --mp-lh-174:1.74;
  --mp-lh-175:1.75;
  --mp-lh-18:1.8;
  --mp-lh-182:1.82;
  --mp-track-neg-1px:-1px;
  --mp-track-neg-055:-.055em;
  --mp-track-neg-05:-.05em;
  --mp-track-neg-045:-.045em;
  --mp-track-neg-04:-.04em;
  --mp-track-neg-035:-.035em;
  --mp-track-neg-03:-.03em;
  --mp-track-neg-026:-.026em;
  --mp-track-neg-025:-.025em;
  --mp-track-neg-02:-.02em;
  --mp-track-neg-018:-.018em;
  --mp-track-neg-015:-.015em;
  --mp-track-neg-012:-.012em;
  --mp-track-neg-01:-.01em;
  --mp-track-neg-008:-.008em;
  --mp-track-zero:0;
  --mp-track-pos-005:.005em;
  --mp-track-pos-01:.01em;
  --mp-track-pos-012:.012em;
  --mp-track-pos-04:.04em;
  --mp-track-pos-045:.045em;
  --mp-track-pos-06:.06em;
  --mp-track-pos-075:.075em;
  --mp-track-pos-08:.08em;
  --mp-track-pos-12:.12em;

  /* Typography roles. Families are deliberately centralized so Phase 2 can
     swap the visual family without hunting through component CSS. */
  --mp-font-body:"Roboto",Arial,"Helvetica Neue",sans-serif;
  --mp-font-display:"Roboto",Arial,"Helvetica Neue",sans-serif;
  --mp-font-compact:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --mp-font-nav:var(--mp-font-body);
  --mp-font-section:var(--mp-font-compact);
  --mp-font-reading:Georgia,"Times New Roman",serif;
  --mp-type-body-size:var(--mp-fs-14);
  --mp-type-body-line:var(--mp-lh-155);
  --mp-type-nav-size:var(--mp-fs-12);
  --mp-type-nav-weight:var(--mp-weight-regular);
  --mp-type-nav-tracking:var(--mp-track-zero);
  --mp-type-section-size:var(--mp-fs-22);
  --mp-type-section-weight:var(--mp-weight-bold);
  --mp-type-card-size:var(--mp-fs-13);
  --mp-type-card-weight:var(--mp-weight-bold);
  --mp-type-meta-size:var(--mp-fs-11);
  --mp-type-meta-weight:var(--mp-weight-regular);
  --mp-type-hero-size:var(--mp-fs-30);
  --mp-type-hero-weight:var(--mp-weight-extrabold);

  /* Spacing scale. */
  --mp-space-1:4px;
  --mp-space-2:8px;
  --mp-space-3:12px;
  --mp-space-4:16px;
  --mp-space-5:20px;
  --mp-space-6:24px;
  --mp-space-8:32px;
  --mp-space-10:40px;
  --mp-space-12:48px;
  --mp-space-16:64px;

  /* Semantic color/elevation roles. */
  --mp-bg:var(--mp-light-bg);
  --mp-surface:var(--mp-light-surface);
  --mp-surface-2:var(--mp-light-surface-2);
  --mp-text:var(--mp-light-text);
  --mp-muted:var(--mp-light-muted);
  --mp-line:rgba(15,20,25,.10);
  --mp-success:#248858;
  --mp-warning:#a36100;
  --mp-danger:#a51d30;
  --mp-rating:#d8a900;
  --mp-accent-hover:color-mix(in srgb,var(--mp-accent) 84%,#000);
  --mp-accent-soft:color-mix(in srgb,var(--mp-accent) 10%,transparent);
  --mp-selected-soft:color-mix(in srgb,var(--mp-selected) 10%,transparent);
  --mp-focus-ring:0 0 0 3px color-mix(in srgb,var(--mp-accent) 18%,transparent);
  --mp-shadow-sm:0 5px 14px rgba(10,15,20,.08);
  --mp-shadow:0 14px 40px rgba(10,15,20,.10);
  --mp-shadow-lg:0 24px 70px rgba(10,15,20,.14);
  --mp-motion-fast:140ms;
  --mp-motion-ui:150ms;
  --mp-motion-quick:160ms;
  --mp-motion-base:180ms;
  --mp-motion-card:200ms;
  --mp-motion-feature:240ms;
  --mp-motion-dialog:250ms;
  --mp-motion-slow:340ms;
  --mp-ease:cubic-bezier(.2,.7,.2,1);

  /* Compatibility aliases for existing production components. They resolve
     to canonical roles and are not independently configurable. */
  --mp-font:var(--mp-font-body);
  --mp-font-serif:var(--mp-font-reading);
  --mp-nav-font-size:var(--mp-type-nav-size);
  --mp-nav-font-weight:var(--mp-type-nav-weight);
  --mp-nav-letter-spacing:var(--mp-type-nav-tracking);
  --mp-radius:var(--mp-radius-card);
}

html[data-mp-theme="dark"]{
  --mp-bg:var(--mp-dark-bg);
  --mp-surface:var(--mp-dark-surface);
  --mp-surface-2:var(--mp-dark-surface-2);
  --mp-text:var(--mp-dark-text);
  --mp-muted:var(--mp-dark-muted);
  --mp-accent-text:var(--mp-accent-text-dark);
  --mp-line:rgba(255,255,255,.10);
  --mp-shadow-sm:0 5px 14px rgba(0,0,0,.22);
  --mp-shadow:0 14px 40px rgba(0,0,0,.35);
  --mp-shadow-lg:0 24px 70px rgba(0,0,0,.46);
}