@font-face {
  font-family: "OPPO Sans";
  src: url("../../assets/brand/oppo-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --oppo-green: #2cff73;
  --oppo-green-dark: #046a38;
  --oppo-ink: #000;
  --oppo-white: #fff;
  --oppo-gray-50: #fafafa;
  --oppo-gray-100: #f6f6f6;
  --oppo-gray-200: #ebebeb;
  --oppo-gray-300: #dcdcdc;
  --oppo-gray-600: #666;
  --oppo-danger: #bc302b;
  --oppo-danger-soft: #fff1ef;
  --oppo-warning: #80551a;
  --oppo-warning-soft: #fff6e6;
  --oppo-success-soft: #e9f8ee;
  --oppo-text: var(--oppo-ink);
  --oppo-muted: var(--oppo-gray-600);
  --oppo-surface: var(--oppo-white);
  --oppo-canvas: var(--oppo-gray-50);
  --oppo-border: var(--oppo-gray-300);
  --oppo-font: "OPPO Sans", Arial, Helvetica, sans-serif;
  --oppo-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --oppo-text-xs: .75rem;
  --oppo-text-sm: .875rem;
  --oppo-text-md: 1rem;
  --oppo-text-lg: 1.25rem;
  --oppo-title-sm: 1.5rem;
  --oppo-title-md: 2rem;
  --oppo-title-lg: 3rem;
  --oppo-display: clamp(2.5rem, 4.5vw, 4rem);
  --oppo-space-1: .25rem;
  --oppo-space-2: .5rem;
  --oppo-space-3: .75rem;
  --oppo-space-4: 1rem;
  --oppo-space-6: 1.5rem;
  --oppo-space-8: 2rem;
  --oppo-space-12: 3rem;
  --oppo-space-16: 4rem;
  --oppo-radius-sm: .5rem;
  --oppo-radius-md: 1rem;
  --oppo-radius-lg: 1.5rem;
  --oppo-radius-pill: 999px;
  --oppo-control-sm: 2.5rem;
  --oppo-control-md: 3rem;
  --oppo-control-lg: 3.5rem;
  --oppo-shadow: 0 12px 40px rgb(0 0 0 / 8%);
  --oppo-focus: 0 0 0 3px var(--oppo-white), 0 0 0 5px var(--oppo-green-dark);
  --oppo-motion: 160ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --oppo-motion: 0ms; }
}