/*
 * Application aliases for stormhuset-theme.css.
 * Change palette, typography, radius and shadow in the theme file.
 * The existing Razor/Bootstrap components consume these semantic roles.
 */

:root {
  --font-family-body: var(--font-sans);
  --font-family-heading: var(--font-serif);
  --font-size-caption: 0.75rem;
  --font-size-label: 0.875rem;
  --font-size-body: 1rem;
  --font-size-reading: 0.9rem;
  --font-size-heading-sm: 1.25rem;
  --font-size-heading-md: 2rem;
  --font-size-heading-lg: clamp(2.4rem, 3.3vw, 3.5rem);
  --font-size-metric: 1.7rem;
  --font-size-metric-lg: clamp(2.1rem, 4vw, 2.9rem);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.1;
  --line-height-label: 1.35rem;
  --line-height-body: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-reading: 1.65;
  --notice-icon-size: 1.25rem;
  --notice-icon-slot: 1.5rem;
  --letter-spacing-heading: -0.025em;
  --letter-spacing-overline: 0.06em;

  --space-2xs: var(--spacing);
  --space-xs: calc(var(--spacing) * 2);
  --space-sm: calc(var(--spacing) * 3);
  --space-md: calc(var(--spacing) * 4);
  --space-lg: calc(var(--spacing) * 6);
  --space-xl: calc(var(--spacing) * 8);
  --space-2xl: calc(var(--spacing) * 12);
  --space-section: var(--space-lg);
  --space-section-spacious: clamp(var(--space-xl), 4vw, var(--space-2xl));
  --space-page-block: clamp(1.5rem, 3vw, 2.75rem);
  --space-page-inline: var(--space-md);

  --radius-sm: calc(var(--radius) * 0.5);
  --radius-control: calc(var(--radius) * 0.75);
  --radius-menu: var(--radius);
  --radius-panel: calc(var(--radius) * 1.35);
  --radius-modal: calc(var(--radius) * 1.35);
  --radius-pill: 999px;
  --control-height-sm: 2.25rem;
  --control-height: 2.625rem;
  --control-height-lg: 3rem;
  --control-padding-inline: 1rem;
  --touch-target-min: 2.75rem;
  --border-width: 1px;
  --badge-padding-block: .34rem;
  --badge-padding-inline: .6rem;
  --badge-line-height: 1rem;
  --badge-height: calc(var(--badge-line-height) + 2 * var(--badge-padding-block) + 2 * var(--border-width));
  --shadow-subtle: var(--shadow-sm);
  --shadow-elevated: var(--shadow-md);
  --shadow-overlay: var(--shadow-lg);

  --layout-content-max: 80rem;
  --layout-reading-max: 50rem;
  --layout-copy-max: 46rem;
  --motion-fast: 150ms ease;
  --motion-standard: 220ms ease;
  --overline-size: 0.72rem;
  --overline-weight: var(--font-weight-semibold);
  --overline-line-height: 1rem;
  --color-print-text: #000;
  --color-print-bg: #fff;
  --color-print-ink: var(--palette-charcoal);
  --color-print-muted: #526570;
  --color-print-border: #d7e0da;
  --color-print-table-header: color-mix(in srgb, var(--palette-verdigris) 5.4%, var(--color-print-bg));
  --color-print-unknown: color-mix(in srgb, var(--palette-charcoal) 18%, var(--color-print-bg));
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --color-bg-page: var(--background);
  --color-bg-surface: var(--card);
  --color-bg-surface-subtle: var(--muted);
  --color-bg-surface-strong: var(--secondary);
  --color-bg-elevated: var(--popover);
  --color-bg-header: var(--header);
  --color-bg-navigation-backdrop: rgb(0 0 0 / 48%);
  --color-bg-input: var(--field);
  --color-bg-modal: var(--card);
  --color-bg-modal-header: color-mix(in srgb, var(--primary) 8%, var(--card));
  --color-bg-modal-footer: color-mix(in srgb, var(--muted) 60%, var(--card));
  --color-bg-interactive: var(--accent);
  --color-bg-selected: var(--selected);
  --color-text-primary: var(--foreground);
  --color-text-secondary: var(--muted-foreground);
  --color-text-muted: var(--muted-foreground);
  /* All ordinary frames share one color; focus and status markers are separate. */
  --color-border-subtle: var(--border);
  --color-border-default: var(--color-border-subtle);
  --color-border-strong: var(--color-border-subtle);
  --color-accent: var(--primary);
  --color-accent-text: var(--link);
  --color-accent-text-hover: var(--link-hover);
  --color-accent-hover: var(--primary-hover);
  --color-accent-strong: var(--primary-hover);
  --color-accent-subtle: var(--accent);
  --color-bg-badge: var(--muted);
  --color-badge-text: var(--muted-foreground);
  --color-bg-badge-accent: var(--accent);
  --color-badge-accent-text: var(--accent-foreground);
  --color-bg-badge-emphasis: var(--selected);
  --color-badge-emphasis-text: var(--foreground);
  --color-badge-border: var(--border);
  --color-on-accent: var(--primary-foreground);
  --color-on-brand: var(--brand-foreground);
  --color-on-danger: var(--destructive-foreground);
  --color-accent-rgb: var(--primary-rgb);
  --color-focus-ring: var(--ring);
  --color-success: var(--success);
  --color-success-rgb: var(--success-rgb);
  --color-warning: var(--warning);
  --color-warning-text: var(--warning-text);
  --color-warning-rgb: var(--warning-rgb);
  --color-danger: var(--destructive-text);
  --color-danger-fill: var(--destructive);
  --color-danger-rgb: var(--destructive-rgb);
  --color-info: var(--link);
  --color-success-surface: var(--success-surface);
  --color-warning-surface: var(--warning-surface);
  --color-danger-surface: var(--destructive-surface);
  --color-info-surface: var(--info-surface);
  --color-bg-segmented: color-mix(in oklab, var(--secondary) 78%, transparent);
  --color-bg-table-header: var(--table-header);
  --color-bg-table-header-inset: color-mix(in srgb, var(--color-bg-table-header) 45%, var(--color-bg-surface));
  --color-bg-table-row-hover: var(--table-row-hover);
  --color-bg-disclosure-row: var(--disclosure-row);
  --color-bg-expandable: var(--disclosure-body);
  --shadow-segmented: var(--shadow-sm);
  --gradient-brand: var(--brand-gradient);
  --gradient-page: var(--page-gradient);
  --color-data-visits: var(--chart-1);
  --color-data-adults: var(--chart-2);
  --color-data-young-adults: var(--chart-3);
  --color-data-teens: var(--chart-4);
  --color-data-children: var(--chart-5);

  /* Bootstrap's public variables are aliases of the same palette. */
  --bs-body-font-family: var(--font-family-body);
  --bs-body-bg: var(--color-bg-page);
  --bs-body-color: var(--color-text-primary);
  --bs-border-color: var(--color-border-subtle);
  --bs-border-color-translucent: var(--color-border-subtle);
  --bs-secondary-border-subtle: var(--color-border-subtle);
  --bs-light-border-subtle: var(--color-border-subtle);
  --bs-dark-border-subtle: var(--color-border-subtle);
  --bs-secondary-bg: var(--color-bg-surface-subtle);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-tertiary-bg: var(--color-bg-surface-subtle);
  --bs-emphasis-color: var(--color-text-primary);
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: var(--color-accent-rgb);
  --bs-success: var(--color-success);
  --bs-success-rgb: var(--color-success-rgb);
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: var(--color-warning-rgb);
  --bs-danger: var(--color-danger-fill);
  --bs-danger-rgb: var(--color-danger-rgb);
  --bs-link-color: var(--color-accent-text);
  --bs-link-hover-color: var(--color-accent-text-hover);
  --bs-primary-text-emphasis: var(--color-accent-text);
  --bs-primary-bg-subtle: var(--color-accent-subtle);
  --bs-primary-border-subtle: var(--color-border-default);
  --bs-info-text-emphasis: var(--color-info);
  --bs-info: var(--color-info);
  --bs-info-rgb: var(--link-rgb);
  --bs-info-bg-subtle: var(--color-info-surface);
  --bs-info-border-subtle: var(--color-border-default);
  --bs-success-text-emphasis: var(--color-success);
  --bs-success-bg-subtle: var(--color-success-surface);
  --bs-success-border-subtle: var(--color-border-subtle);
  --bs-warning-text-emphasis: var(--color-warning-text);
  --bs-warning-bg-subtle: var(--color-warning-surface);
  --bs-warning-border-subtle: var(--color-border-subtle);
  --bs-danger-text-emphasis: var(--color-danger);
  --bs-danger-bg-subtle: var(--color-danger-surface);
  --bs-danger-border-subtle: var(--color-border-subtle);
  --bs-focus-ring-color: var(--color-focus-ring);
  --bs-form-valid-color: var(--color-success);
  --bs-form-valid-border-color: var(--color-success);
  --bs-form-invalid-color: var(--color-danger);
  --bs-form-invalid-border-color: var(--color-danger);
}