/*
 * IRL color system
 * Based on UCLA's official digital brand palette:
 * https://brand.ucla.edu/identity/colors
 *
 * Use semantic tokens in components. Brand primitives should only be used to
 * define those tokens, which keeps future theme changes centralized here.
 */
:root {
  /* UCLA brand primitives */
  --ucla-blue: #2774ae;
  --ucla-blue-darkest: #003b5c;
  --ucla-blue-darker: #005587;
  --ucla-blue-lighter: #8bb8e8;
  --ucla-blue-lightest: #daebfe;
  --ucla-gold: #ffd100;
  --ucla-gold-darker: #ffc72c;
  --ucla-gold-darkest: #ffb81c;

  /* UCLA Design System interactive palette */
  --ucla-interactive-default: #00598c;
  --ucla-interactive-hover: #0079bf;
  --ucla-interactive-active: #003b5c;
  --ucla-interactive-focus: #00568c;

  /* Neutral primitives from the UCLA digital palette */
  --white: #ffffff;
  --black: #000000;
  --gray-80: #333333;
  --gray-60: #666666;
  --gray-40: #999999;
  --gray-20: #cccccc;
  --gray-10: #e5e5e5;
  --gray-05: #f5f5f5;

  /* Semantic application tokens */
  --color-brand-primary: var(--ucla-blue);
  --color-brand-primary-dark: var(--ucla-blue-darker);
  --color-brand-accent: var(--ucla-gold);
  --color-brand-accent-hover: var(--ucla-gold-darker);
  --color-interactive: var(--ucla-interactive-default);
  --color-interactive-hover: var(--ucla-interactive-hover);
  --color-interactive-active: var(--ucla-interactive-active);
  --color-interactive-focus: var(--ucla-interactive-focus);
  --color-text: var(--gray-80);
  --color-text-muted: var(--gray-60);
  --color-text-subtle: var(--gray-40);
  --color-text-on-dark: var(--white);
  --color-surface: var(--white);
  --color-surface-subtle: var(--gray-05);
  --color-border: var(--gray-10);
  --color-border-strong: var(--gray-20);
  --color-error: #d60000;
  --color-error-surface: #fff0f0;
  --color-highlight-surface: #fff8cc;

  /* RGB channels support reusable translucent colors. */
  --rgb-black: 0, 0, 0;
  --rgb-white: 255, 255, 255;
  --rgb-interactive: 0, 89, 140;
}