/* ==========================================================================
   DESIGN TOKENS — OTB TV Theme

   All visual properties should reference these tokens. Never hardcode values
   in component CSS; add a new token here instead.
   ========================================================================== */

:root {

  /* ---------- COLOR PALETTE ---------- */

  /* Brand — runtime-overridden by otb_core_page_attachments() with the
     accent color from otb_core.site_settings (default #c2185b passes
     5.87:1 vs white). The token below is the static fallback used when
     the inline override hasn't loaded (e.g. in dompdf, where CSS
     custom properties aren't honored). */
  --color-primary: #c2185b;
  --color-dark: #1c1c1c;
  --color-dark-medium: #2a2a2a;
  --color-dark-charcoal: #333;

  /* Neutrals */
  --color-white: #fff;
  --color-gray-100: #f9f9f9;
  --color-gray-200: #ddd;
  --color-gray-300: #ccc;
  --color-gray-400: #aaa;
  --color-gray-600: #555;
  --color-gray-800: #222;

  /* Semantic — Light mode */
  --color-text-primary: var(--color-gray-600);
  --color-text-muted: #666;
  --color-text-heading: var(--color-dark);
  --color-text-dark: var(--color-dark-charcoal);
  --color-text-light: var(--color-white);
  --color-bg-primary: #f7f7f7;
  --color-bg-dark: var(--color-dark);
  --color-bg-surface: #f0f0f0;
  --color-bg-card: #fbfbfb;
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary);
  --color-border-light: var(--color-gray-200);
  --color-border-medium: var(--color-gray-400);

  /* Brand variants */
  --color-primary-hover: #155a83;
  --color-primary-on-dark: #3a9dce;       /* Always the lighter blue — for text/icons on dark backgrounds */
  --color-primary-on-dark-hover: color-mix(in srgb, var(--color-primary-on-dark) 78%, white);
  --color-primary-btn: #1a73a7;           /* Button backgrounds — always darker for white text contrast */
  --color-primary-btn-hover: #155a83;

  /* Status / semantic */
  --color-status-success-bg: #e8f5e9;
  --color-status-success-border: #4caf50;
  --color-status-success-text: #2e7d32;
  --color-status-warning-bg: #fff3e0;
  --color-status-warning-border: #ff9800;
  --color-status-warning-text: #e65100;
  --color-status-error-bg: #ffebee;
  --color-status-error-border: #f44336;
  --color-status-error-text: #c62828;
  --color-status-error-hover: #a01c1c;
  /* Info status — neutral gray rather than blue, so it stays visually
     distinct from the (configurable) accent color and doesn't compete
     with the accent on pages where info banners and accent CTAs share
     the viewport. Decision 2026-05-04 (replacing the prior blue). */
  --color-status-info-bg: #f0f0f0;
  --color-status-info-border: #b0b0b0;
  --color-status-info-text: #333;

  /* Status / semantic — dark mode variants */
  --color-status-success-bg-dark: #1b3a1d;
  --color-status-success-text-dark: #a5d6a7;
  --color-status-warning-bg-dark: #3e2c10;
  --color-status-warning-text-dark: #ffcc80;
  --color-status-error-bg-dark: #3c1111;
  --color-status-error-text-dark: #ef9a9a;

  /* Dark surfaces — layered backgrounds for dark-context components */
  --color-surface-overlay: #0e0e0e;      /* drawer, full-screen overlays */
  --color-surface-raised: rgb(20, 20, 20); /* cards on dark bg, feeds */
  --color-surface-submenu: #171717;      /* dropdown/submenu container */
  --color-surface-submenu-item: #1e1e1e; /* individual submenu items */
  --color-surface-mobile-item: #292b2d;  /* mobile menu items */
  --color-surface-scrim: rgba(0, 0, 0, 0.95); /* filter bar, CTA sections */

  /* Dark-context interactive surfaces (inputs, buttons on dark bg) */
  --color-input-dark-bg: rgba(255, 255, 255, 0.08);
  --color-input-dark-border: rgba(255, 255, 255, 0.15);
  --color-input-dark-focus-border: rgba(255, 255, 255, 0.35);
  --color-input-dark-focus-bg: rgba(255, 255, 255, 0.12);
  --color-btn-dark-bg: rgba(255, 255, 255, 0.06);
  --color-btn-dark-border: rgba(255, 255, 255, 0.12);
  --color-btn-dark-hover-border: rgba(255, 255, 255, 0.25);
  --color-btn-dark-hover-bg: rgba(255, 255, 255, 0.1);

  /* Dark-on-dark borders (used on dark pages for subtle separation) */
  --color-border-dark-subtle: rgba(255, 255, 255, 0.08);
  --color-border-dark-light: rgba(255, 255, 255, 0.15);

  /* Components */
  --color-header-bg: var(--color-dark);
  --color-header-text: var(--color-white);
  --color-nav-text: var(--color-gray-600);
  --color-nav-text-hover: var(--color-dark);
  --color-nav-text-on-dark: var(--color-white);
  --color-nav-text-on-dark-hover: var(--color-primary-on-dark);
  --color-dropdown-bg: var(--color-white);
  --color-dropdown-shadow: rgba(0, 0, 0, 0.1);
  --color-focus-ring: var(--color-primary);

  /* ---------- TYPOGRAPHY ---------- */

  --font-family-base: "Work Sans", Arial, Helvetica, sans-serif;
  --font-family-serif: "Bitter", Georgia, serif;
  --font-family-heading: var(--font-family-base);

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

  --font-size-3xs: 0.6875rem; /* 11px — card metadata (dates, timestamps) */
  --font-size-2xs: 0.75rem;   /* 12px — badges, tiny meta */
  --font-size-xs: 0.875rem;   /* 14px — labels, captions, buttons */
  --font-size-sm: 1rem;       /* 16px — body (base) */
  --font-size-md: 1.125rem;   /* 18px — lead text, subtitles */
  --font-size-lg: 1.25rem;    /* 20px — section titles, subheadings */
  --font-size-xl: 1.5rem;     /* 24px — h2 */
  --font-size-2xl: 2rem;      /* 32px — h1, page titles */
  --font-size-3xl: 2.5rem;    /* 40px — hero display headings */
  --font-size-4xl: 3rem;      /* 48px — hero display at desktop */

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Body */
  --body-font-family: var(--font-family-base);
  --body-font-size: var(--font-size-sm);
  --body-line-height: var(--line-height-normal);
  --body-color: var(--color-text-primary);

  /* Headings */
  --heading-font-family: var(--font-family-heading);
  --heading-font-weight: var(--font-weight-medium);
  --heading-text-transform: uppercase;
  --heading-color: var(--color-text-heading);

  --h1-font-size: var(--font-size-2xl);
  --h1-line-height: var(--line-height-tight);
  --h2-font-size: var(--font-size-xl);
  --h2-line-height: var(--line-height-snug);
  --h3-font-size: var(--font-size-sm);
  --h3-line-height: var(--line-height-snug);
  --h4-font-size: var(--font-size-xs);
  --h4-line-height: var(--line-height-relaxed);
  --h4-font-weight: var(--font-weight-bold);
  --h4-text-transform: none;

  /* Pullquotes */
  --pullquote-font-family: var(--font-family-serif);
  --pullquote-font-size: var(--font-size-md);
  --pullquote-line-height: 1.33;
  --pullquote-color: var(--color-text-dark);
  --pullquote-border-width: 4px;
  --pullquote-border-color: var(--color-primary);

  /* ---------- SPACING ---------- */

  --space-0: 0;
  --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;

  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-4);
  --spacing-md: var(--space-6);
  --spacing-lg: var(--space-8);
  --spacing-xl: var(--space-12);

  /* ---------- LAYOUT ---------- */

  --container-max-width: 980px;
  --site-max-width: 1060px;
  --content-max-width: 820px;    /* Narrow content column (articles, about, user pages) */
  --content-narrow-width: 480px; /* Very narrow (login forms) */
  --container-padding-mobile: 10px;
  --container-padding-medium: 25px;
  --container-padding-desktop: 30px;

  --layout-gap-sm: var(--space-4);
  --layout-gap-md: var(--space-6);
  --layout-gap-lg: var(--space-8);

  /* ---------- BREAKPOINTS ---------- */
  /*
     CSS custom properties can't be used inside @media queries, so the
     raw px values below are repeated in every component's media query.
     This is intentional — the alternative (PostCSS / Sass / a build-
     time token substitution step) would add toolchain complexity for
     one class of duplication that's easy to grep.
     Decision: accept the duplication (reviewed pre-beta, 2026-04-20).
     Keep this scale as the single source of truth; when a breakpoint
     changes, grep the repo for the old px value and update every site.

     --breakpoint-xs:  480px    (small mobile: card grids, artist portrait)
     --breakpoint-sm:  600px    (large mobile: 2-col grids, artist detail)
     --breakpoint-md:  670px    (tablet: container padding, value props)
     --breakpoint-lg:  769px    (tablet landscape: desktop nav, footer row, bg image)
     --breakpoint-xl:  995px    (desktop: container max-width, sidebar grid, hero)
     --breakpoint-2xl: 1100px   (wide: header full spacing, logo large)
  */
  --breakpoint-sm: 600px;
  --breakpoint-md: 670px;
  --breakpoint-lg: 995px;

  /* ---------- BORDERS & RADIUS ---------- */

  --border-width-thin: 1px;
  --border-width-medium: 4px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 14px;
  --border-color-default: var(--color-border-light);
  --border-color-medium: var(--color-border-medium);

  /* ---------- Z-INDEX SCALE ---------- */
  /* Phase 4 [04 M4]. Layered stacking system — pick from these in
     component CSS rather than reaching for arbitrary numbers. New
     overlays should fit between adjacent tiers. */

  --z-base:           1;     /* in-flow stacking (hero overlays, content layering) */
  --z-dropdown:       100;   /* desktop nav dropdowns */
  --z-dropdown-above: 101;   /* dropdown extras (badges, secondary menus) */
  --z-mobile-drawer:  1000;  /* full-screen mobile menu drawer */
  --z-sticky-header:  1001;  /* sticky header above the drawer's backdrop */
  --z-modal:          2000;  /* (reserved) future modals */
  --z-toast:          3000;  /* (reserved) future toast notifications */

  /* ---------- SHADOWS ---------- */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);
  --shadow-panel: 0 0 40px rgba(0, 0, 0, 0.3);

  /* ---------- FOCUS ---------- */

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-focus-ring);

  /* ---------- COMPONENT TOKENS ---------- */

  /* Navigation */
  --nav-font-size: 0.9375rem;  /* 15px */
  --nav-font-weight: var(--font-weight-bold);
  --nav-item-gap: var(--space-6);
  --nav-link-padding: var(--space-2);

  /* Dropdowns */
  --dropdown-min-width: 200px;
  --dropdown-padding: var(--space-4);
  --dropdown-bg: var(--color-dropdown-bg);
  --dropdown-shadow: var(--shadow-lg);
  --dropdown-border-radius: var(--border-radius-md);

  /* Header */
  --accent-bar-height: 4px;
  --header-bg: var(--color-header-bg);
  --header-padding-block: var(--space-4);
  --header-min-height: 56px;
  --header-logo-height: 36px;

  /* Forms */
  --input-border: var(--border-width-thin) solid var(--color-border-light);
  --input-padding: var(--space-3) var(--space-4);
  --input-border-radius: var(--border-radius-sm);
  --input-max-width: 300px;

  /* Buttons */
  --button-padding: 0.45rem 0.75rem;
  --button-border-radius: var(--border-radius-md);
  --button-font-weight: var(--font-weight-medium);

  /* ---------- RESPONSIVE ADJUSTMENTS ---------- */

  @media (min-width: 995px) {
    --h3-font-size: var(--font-size-lg);
  }
}

/* ---------- DARK MODE (user-toggled) ---------- */
/* Applied via data-theme="dark" on <html>. Affects content pages only.
   Listing pages (.main--dark) have their own permanent dark styling. */

[data-theme="dark"] {
  /* Lighten primary for dark backgrounds — 5.59:1 vs #1c1c1c */
  --color-primary: #3a9dce;
  --color-primary-hover: #4dadd7;
  --color-text-primary: #ccc;
  --color-text-muted: #aaa;
  --color-text-heading: var(--color-white);
  --color-text-dark: #ccc;
  --color-bg-primary: var(--color-dark);
  --color-bg-surface: var(--color-dark-medium);
  --color-bg-card: var(--color-dark-medium);
  --color-border-light: var(--color-dark-charcoal);
  --color-border-medium: var(--color-gray-600);
  --color-nav-text: #ccc;
  --color-nav-text-hover: var(--color-white);
  --color-dropdown-bg: var(--color-dark-medium);
  --color-dropdown-shadow: rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-panel: 0 0 40px rgba(0, 0, 0, 0.5);
}