/* ==========================================================================
   LEVEL 2 TOKENS — "Stage and Page"

   Same property names as otbtv_theme/css/base/tokens.css, Level 2 values,
   plus the few properties Level 2 adds. The only file in this theme that
   holds literal colours and sizes (mockups/DESIGN-SPEC.md §6).

   Colours are set per ground, not per visitor preference:
     .otb-ground--stage   near-black: home, catalogue, player
     .otb-ground--page    warm paper: reading, paying, account, portal, artist index
   <body> carries the page's ground (otbtv_stage_ground()); the header and
   footer are always Stage; any band may set the other ground on itself.
   A scope redeclares every colour token, so grounds nest in either order.
   ========================================================================== */

:root {

  /* ---------- TYPE ---------- */

  --font-family-display: "Jost", "Work Sans", Arial, sans-serif;
  --font-family-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-family-heading: var(--font-family-display);
  --font-family-serif: var(--font-family-display);

  --font-weight-light: 300;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;      /* Work Sans is loaded at 400/500/600 */

  --font-size-data: 0.8125rem;        /* 13px — DM Mono: invoice numbers, IP ranges, amounts */
  --font-size-ui: 0.9375rem;          /* 15px — buttons, nav */
  --font-size-h2: 1.75rem;            /* 28px */
  --font-size-display-s: 2.25rem;     /* 36px — film title on phones */
  --font-size-display-m: 2.75rem;     /* 44px — phone hero, figures */
  --font-size-display-l: 3.5rem;      /* 56px — film title, page title on Stage */
  --font-size-display-xl: 5.5rem;     /* 88px — home hero */

  --line-height-display: 1.02;
  --line-height-display-xl: 0.98;
  --line-height-body: 1.6;
  --letter-spacing-display: -0.01em;
  --letter-spacing-eyebrow: 0.09em;

  --body-line-height: var(--line-height-body);

  /* Sentence-case headings; uppercase is reserved for the 12px eyebrow. */
  --heading-font-weight: var(--font-weight-normal);
  --heading-text-transform: none;
  --h1-font-size: var(--font-size-3xl);
  --h1-line-height: 1.1;
  --h2-font-size: var(--font-size-h2);
  --h2-line-height: 1.2;
  --h3-font-size: var(--font-size-md);
  --h3-line-height: 1.35;

  --nav-font-weight: var(--font-weight-medium);

  /* ---------- SPACE (4px scale; the steps the base scale lacks) ---------- */

  --space-7: 1.75rem;
  --space-20: 5rem;
  --space-22: 5.5rem;
  --space-24: 6rem;

  /* ---------- SHAPE ---------- */

  --border-radius-sm: 4px;      /* chips */
  --border-radius-md: 10px;     /* buttons, inputs, stills */
  --border-radius-lg: 16px;     /* cards */
  --border-width-control: 1.5px;
  --input-border-radius: var(--border-radius-md);
  --input-padding: 0.5625rem 0.875rem;   /* 44px tall at 16px/1.5 */

  --control-height: 44px;
  --button-padding: 0 var(--space-5);

  /* Cards carry no shadow in Level 2. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-panel: none;

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

  --container-max-width: 1440px;          /* 1280 content + gutters */
  --container-padding-mobile: 20px;
  --container-padding-medium: 40px;
  --container-padding-desktop: 80px;
  --container-page-width: 1088px;         /* reading / paying column, gutters included */
  --container-page-padding: 24px;
  --header-height: 56px;

  /* ---------- ALWAYS-DARK PALETTE (Stage values) ---------- */
  /* The base theme's on-dark components read these whatever the ground. */

  --color-dark: #0c0b0e;
  --color-dark-medium: #1c1a21;
  --color-dark-charcoal: #2e2a35;
  --color-gray-100: #fbfaf8;
  --color-gray-200: #dcd7cf;
  --color-gray-300: #cfc9d4;
  --color-gray-400: #b3adb9;
  --color-gray-600: #5c5761;
  --color-gray-800: #18161b;
  --color-text-light: #f4f2ee;

  --color-surface-overlay: #08070a;
  --color-surface-raised: #151318;
  --color-surface-deep: #151318;
  --color-surface-deep-item: #1c1a21;
  --color-surface-submenu: #151318;
  --color-surface-submenu-item: #1c1a21;
  --color-surface-mobile-item: #1c1a21;
  --color-surface-scrim: #151318;
  --color-input-dark-bg: #151318;
  --color-input-dark-border: #2e2a35;
  --color-input-dark-focus-border: #b3adb9;
  --color-input-dark-focus-bg: #1c1a21;
  --color-border-dark-subtle: #2e2a35;
  --color-border-dark-light: #2e2a35;

  /* The Page accent is the admin-set accent (otb_core injects it on
     html:root, fallback #c2185b); captured here so a Page scope nested in
     a Stage scope can restore it. */
  --accent-page: var(--color-primary);
  --accent-page-hover: var(--color-primary-hover);
}

@media (min-width: 995px) {
  :root {
    --header-height: 72px;
  }
}

/* ---------- PAGE (light) — also the default outside any scope ---------- */

:root,
.otb-ground--page {
  --color-bg-primary: #f1efeb;        /* ground */
  --color-bg-surface: #fbfaf8;        /* raised */
  --color-bg-card: #ffffff;
  --color-bg-sunk: #e8e5df;
  --color-border-light: #dcd7cf;      /* line */
  --color-border-medium: #dcd7cf;
  --color-text-primary: #18161b;      /* 15.6:1 on ground */
  --color-text-heading: #18161b;
  --color-text-dark: #18161b;
  --color-text-muted: #5c5761;        /* 6.1:1 on ground, 5.6:1 on sunk */
  --color-on-primary: #ffffff;        /* text on an accent fill — 5.87:1 on #c2185b */
  --color-violet: #4f37b8;            /* campus and institutional signals — 7.1:1 on ground */

  --color-status-success-text: #17663a;
  --color-status-success-bg: #e3f3e8;
  --color-status-success-border: #17663a;
  --color-status-warning-text: #8a4b00;
  --color-status-warning-bg: #fdefd8;
  --color-status-warning-border: #8a4b00;
  --color-status-error-text: #a3231d;
  --color-status-error-bg: #fde7e5;
  --color-status-error-border: #a3231d;
  --color-status-info-text: #4b4750;
  --color-status-info-bg: #e9e6e1;
  --color-status-info-border: #4b4750;
  --color-status-campus-text: #4a32b3;
  --color-status-campus-bg: #ebe6fb;
}

/* The accent family is declared on the scope only: on :root it belongs to
   otb_core's injected values. */
.otb-ground--page {
  --color-primary: var(--accent-page);
  --color-primary-hover: var(--accent-page-hover);
  --color-primary-btn: var(--accent-page);
  --color-primary-btn-hover: var(--accent-page-hover);
}

/* ---------- STAGE (dark) ---------- */

.otb-ground--stage {
  --color-bg-primary: #0c0b0e;        /* ground */
  --color-bg-surface: #151318;        /* raised */
  --color-bg-card: #1c1a21;
  --color-bg-sunk: #08070a;
  --color-border-light: #2e2a35;      /* line */
  --color-border-medium: #2e2a35;
  --color-text-primary: #f4f2ee;      /* 17.6:1 on ground */
  --color-text-heading: #f4f2ee;
  --color-text-dark: #f4f2ee;
  --color-text-muted: #b3adb9;        /* 9.0:1 on ground, 7.9:1 on card */
  --color-primary: #ff5aa8;           /* as text 6.8:1 on ground, 6.0:1 on card; as a fill it takes --color-on-primary */
  --color-primary-hover: color-mix(in srgb, #ff5aa8 78%, white);
  --color-primary-on-dark: #ff5aa8;
  --color-primary-on-dark-hover: color-mix(in srgb, #ff5aa8 78%, white);
  --color-nav-text-on-dark-hover: #ff5aa8;
  --color-on-primary: #1a0a12;        /* 6.6:1 on #ff5aa8 */
  /* Fill for the base theme's white-on-accent components: stays the Page
     accent, where white text holds AA. */
  --color-primary-btn: var(--accent-page);
  --color-primary-btn-hover: var(--accent-page-hover);
  --color-violet: #b9a6ff;            /* 9.3:1 on ground */

  --color-status-success-text: #8fe0ac;
  --color-status-success-bg: #12301f;
  --color-status-success-border: #8fe0ac;
  --color-status-warning-text: #ffcf8a;
  --color-status-warning-bg: #3a2a0c;
  --color-status-warning-border: #ffcf8a;
  --color-status-error-text: #ffaaa3;
  --color-status-error-bg: #3d1513;
  --color-status-error-border: #ffaaa3;
  --color-status-info-text: #cfc9d4;
  --color-status-info-bg: #2a2630;
  --color-status-info-border: #cfc9d4;
  --color-status-campus-text: #c7b8ff;
  --color-status-campus-bg: #261d45;
}

/* ---------- BOTH GROUNDS ---------- */
/* A custom property that references another is resolved where it is
   declared, so everything the base theme derives from the colours above
   is derived again inside each scope. */

.otb-ground--page,
.otb-ground--stage {
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);
  --color-focus-ring: var(--color-primary);
  --focus-ring-color: var(--color-primary);
  --color-nav-text: var(--color-text-primary);
  --color-nav-text-hover: var(--color-primary);
  --color-dropdown-bg: var(--color-bg-card);
  --dropdown-bg: var(--color-bg-card);
  --body-color: var(--color-text-primary);
  --heading-color: var(--color-text-heading);
  --pullquote-color: var(--color-text-primary);
  --pullquote-border-color: var(--color-primary);
  --border-color-default: var(--color-border-light);
  --border-color-medium: var(--color-border-medium);
  --input-border: var(--border-width-thin) solid var(--color-border-light);

  /* otb_core's chip and alert read --otb-status-*, which :root derives once
     from the default ground; derive them again per ground, with the Level 2
     shape: sentence-case chips, borderless messages. */
  --otb-status-good-text: var(--color-status-success-text);
  --otb-status-good-fill: var(--color-status-success-bg);
  --otb-status-good-border: var(--color-status-success-border);
  --otb-status-attention-text: var(--color-status-warning-text);
  --otb-status-attention-fill: var(--color-status-warning-bg);
  --otb-status-attention-border: var(--color-status-warning-border);
  --otb-status-problem-text: var(--color-status-error-text);
  --otb-status-problem-fill: var(--color-status-error-bg);
  --otb-status-problem-border: var(--color-status-error-border);
  --otb-status-neutral-text: var(--color-status-info-text);
  --otb-status-neutral-fill: var(--color-status-info-bg);
  --otb-status-neutral-border: var(--color-status-info-border);
  --otb-status-info-text: var(--color-status-campus-text);
  --otb-status-info-fill: var(--color-status-campus-bg);
  --otb-status-info-border: var(--color-status-campus-text);

  --otb-chip-radius: var(--border-radius-sm);
  --otb-chip-padding: var(--space-1) 0.5625rem;
  --otb-chip-letter-spacing: 0;
  --otb-chip-text-transform: none;
  --otb-alert-radius: var(--border-radius-md);
  --otb-alert-padding: 0.875rem var(--space-4);
  --otb-alert-border-width: 0;

  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}