/* my_custom_app/public/css/portal.tokens.css */
:root {
  /* Website-aligned portal surfaces */
  --surface-1: rgba(255, 255, 255, 0.82);
  --surface-2: rgba(255, 255, 255, 0.92);
  --surface-3: #f6f0e8;
  --bg: #efefef;
  --text: #151515;
  --text-muted: #675f56;

  /* Accent and state */
  --brand: #f1881e;
  --brand-600: #de7f1d;
  --brand-700: #c76d17;
  --success: #1f8f56;
  --warning: #d18b19;
  --danger: #cf4a33;

  /* Shape, depth, rhythm */
  --radius: 28px;
  --radius-sm: 18px;
  --shadow-card: 0 18px 42px rgba(22, 18, 13, 0.07),
                 0 2px 10px rgba(22, 18, 13, 0.04);
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 22px;
  --gap-5: 28px;

  /* Type scale */
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-body: 16px;
  --font-size-small: 13px;

  /* Motion */
  --duration: 160ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --text: #f1f3f5;
    --text-muted: #b7bcc3;
    --surface-1: #151922;
    --surface-2: #1a2030;
    --surface-3: #20283a;
    --shadow-card: 0 10px 24px rgba(0, 0, 0, .45),
                   0 2px 6px rgba(0, 0, 0, .35);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}