/*
  OPA Digital Media / D299 Design Control Panel
  Change these variables first. They control the full learning module.
*/

:root {
  color-scheme: light;

  /* Class website brand palette */
  --ink: #151515;
  --paper: #f7f4ec;
  --white: #ffffff;
  --orange: #f45a24;
  --orange-deep: #bd3e15;
  --yellow: #f2d40b;
  --green: #49c85c;
  --green-deep: #177e3d;
  --blue: #1778ad;
  --blue-deep: #0a527b;
  --muted: #e9e5da;
  --line: rgb(21 21 21 / 22%);
  --line-light: rgb(255 255 255 / 25%);

  /* Typography roles */
  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-body: "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-compact: "Avenir Next Condensed", "Arial Narrow", "Avenir Next", sans-serif;
  --weight-body: 500;
  --weight-medium: 600;
  --weight-display: 900;
  --text-hero: clamp(5.6rem, 11vw, 12rem);
  --text-heading: clamp(3.25rem, 5.6vw, 6.8rem);
  --text-heading-compact: clamp(3rem, 4.8vw, 5.7rem);
  --text-subheading: clamp(1.45rem, 2vw, 2.3rem);
  --text-lede: clamp(1.28rem, 1.65vw, 1.72rem);
  --text-deck: clamp(1.55rem, 2.4vw, 2.75rem);
  --text-body: 1rem;
  --text-label: 0.96rem;
  --line-body: 1.5;
  --line-heading: 0.9;
  --tracking-label: 0.13em;

  /* Layout and rhythm */
  --module-max-width: 1800px;
  --module-gutter: 14px;
  --rail-width: 72px;
  --header-height: 72px;
  --progress-height: 4px;
  --footer-height: 82px;
  --canvas-pad: clamp(30px, 3.5vw, 58px);
  --canvas-gap: clamp(18px, 2.2vw, 32px);
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 52px;

  /* Interaction */
  --motion-fast: 180ms ease;
  --motion: 360ms cubic-bezier(0.32, 0.72, 0, 1);
  --motion-progress: 520ms cubic-bezier(0.32, 0.72, 0, 1);
  --focus-ring: 4px solid var(--yellow);
}

@media (max-width: 720px) {
  :root {
    --module-gutter: 8px;
    --rail-width: 100%;
    --header-height: auto;
    --footer-height: auto;
    --canvas-pad: 28px 20px;
    --canvas-gap: 20px;
    --text-hero: clamp(4.5rem, 25vw, 7rem);
    --text-heading: clamp(2.8rem, 15vw, 4.7rem);
    --text-heading-compact: clamp(2.8rem, 15vw, 4.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms linear;
    --motion: 0.01ms linear;
    --motion-progress: 0.01ms linear;
  }
}