/*
 * Over Isen Radio design framework
 * Derived from the approved ACSS v4 / SchemaWP exports from 2026-10-27.
 * This file owns shared tokens and primitives. Domain stylesheets own components.
 */

:root {
  color-scheme: dark;

  /* Typography: ACSS 1.333 scales, adapted to Inter and OIR's existing hierarchy. */
  --text-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: var(--text-font-family);
  --text-xs: clamp(.75rem, .72rem + .12vw, .82rem);
  --text-s: clamp(.875rem, .84rem + .15vw, .96rem);
  --text-m: clamp(1rem, .95rem + .22vw, 1.125rem);
  --text-l: clamp(1.125rem, 1.04rem + .36vw, 1.35rem);
  --text-xl: clamp(1.35rem, 1.17rem + .76vw, 1.8rem);
  --heading-s: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --heading-m: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --heading-l: clamp(2rem, 1.5rem + 2vw, 3rem);
  --heading-xl: clamp(2.5rem, 1.65rem + 3.4vw, 4.5rem);
  --leading-tight: 1.05;
  --leading-body: 1.5;
  --tracking-tight: -.045em;
  --tracking-wide: .12em;

  /* ACSS spacing foundation: 24-30px base, 1.5 scale, 16-80px gutter. */
  --space-3xs: clamp(.3rem, .28rem + .08vw, .36rem);
  --space-2xs: clamp(.45rem, .41rem + .16vw, .56rem);
  --space-xs: clamp(.68rem, .61rem + .27vw, .84rem);
  --space-s: clamp(1rem, .91rem + .38vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.36rem + .58vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.04rem + .87vw, 2.8125rem);
  --space-xl: clamp(3.375rem, 3.05rem + 1.3vw, 4.21875rem);
  --space-2xl: clamp(5.0625rem, 4.58rem + 1.95vw, 6.328rem);
  --gutter: clamp(1rem, -.68rem + 7.46vw, 5rem);
  --section-space: var(--space-m);
  --content-width: 70rem;
  --content-width-wide: 76rem;

  /* ACSS-compatible semantic palette, adapted to OIR's existing colours. */
  --primary: #78d5ff;
  --primary-hover: #a4e5ff;
  --primary-ultra-dark: #071018;
  --action: #c54424;
  --action-hover: #e05a36;
  --danger: #e53935;
  --success: #78db9a;
  --warning: #ffd54f;
  --base: #1b2634;
  --base-light: #223044;
  --base-dark: #121a25;
  --base-ultra-dark: #06070a;
  --text-light: #eef4fa;
  --text-light-muted: #a9b8c8;
  --border-color-dark: #2c3b4e;
  --focus-color: #ffd166;

  /* Readable aliases for framework primitives; component CSS consumes ACSS names. */
  --color-bg: var(--base-ultra-dark);
  --color-bg-deep: var(--base-ultra-dark);
  --color-surface: var(--base-dark);
  --color-surface-raised: var(--base);
  --color-surface-soft: var(--base-light);
  --color-border: var(--border-color-dark);
  --color-border-strong: #4c6880;
  --color-text: var(--text-light);
  --color-text-muted: var(--text-light-muted);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-ink: var(--primary-ultra-dark);
  --color-action: var(--action);
  --color-action-hover: var(--action-hover);
  --color-danger: var(--danger);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-focus: var(--focus-color);

  /* ACSS radius/card/button foundation. */
  --radius-xs: .42rem;
  --radius-s: .625rem;
  --radius: .9375rem;
  --radius-l: 1.406rem;
  --radius-pill: 999px;
  --shadow-s: 0 .35rem 1rem rgb(0 0 0 / 22%);
  --shadow-m: 0 1rem 2.5rem rgb(0 0 0 / 28%);
  --card-padding: var(--space-m);
  --card-gap: var(--space-xs);
  --card-radius: var(--radius);
  --card-border: 1px solid var(--color-border);
  --card-background: var(--color-surface);
  --button-padding-block: .5em;
  --button-padding-inline: 1.25em;
  --button-min-inline-size: 8.75rem;
  --button-min-block-size: 2.75rem;
  --button-radius: var(--radius-s);
  --control-padding-block: .7rem;
  --control-padding-inline: .75rem;
  --control-radius: var(--radius-s);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-bg-deep);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-block-size: 100vh;
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--leading-body);
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
svg,
video {
  max-inline-size: 100%;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.oir-container {
  inline-size: min(calc(100% - (2 * var(--gutter))), var(--content-width));
  margin-inline: auto;
}

.oir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-s);
}

.oir-card {
  display: grid;
  gap: var(--card-gap);
  padding: var(--card-padding);
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-background);
}

.oir-button {
  display: inline-flex;
  min-inline-size: var(--button-min-inline-size);
  min-block-size: var(--button-min-block-size);
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: 0;
  border-radius: var(--button-radius);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.oir-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}