/* ORAagent color system v1.1 | 2026-10-29
 * Based on the selected original light multicolor homepage.
 * Normalized implementation values; not pixel-perfect image extraction.
 * Scope: light website theme. Import explicitly when implementing.
 */
:root {
  /* 1. Primitives */
  --ora-p-white: #FFFFFF;
  --ora-p-page: #FCFDFF;
  --ora-p-surface-muted: #F6F8FC;
  --ora-p-ink: #142636;
  --ora-p-slate: #52627A;
  --ora-p-muted: #66758A;
  --ora-p-divider: #E7ECF5;
  --ora-p-control-border: #8492AC;
  --ora-p-disabled: #EFF2F7;
  --ora-p-brand: #5865F2;
  --ora-p-brand-hover: #4854DF;
  --ora-p-brand-active: #3D47C7;
  --ora-p-brand-rgb: 88 101 242;
  --ora-p-ink-rgb: 20 38 54;
  --ora-p-lavender: #EEF1FF;
  --ora-p-violet-ink: #4956D8;
  --ora-p-mint: #EAFBEF;
  --ora-p-green-ink: #257245;
  --ora-p-lemon: #FFF8DC;
  --ora-p-amber-ink: #886116;
  --ora-p-peach: #FFF0E8;
  --ora-p-orange-ink: #AF542F;
  --ora-p-rose: #FFF0F1;
  --ora-p-red-ink: #B83A44;
  --ora-p-glow-lemon: #FFF4CB;
  --ora-p-glow-lime: #E5FFC6;
  --ora-p-glow-peach: #FFE1CD;
  --ora-p-glow-lilac: #E8E4FF;

  /* 2. Semantics */
  --ora-color-bg: var(--ora-p-page);
  --ora-color-surface: var(--ora-p-white);
  --ora-color-surface-muted: var(--ora-p-surface-muted);
  --ora-color-text: var(--ora-p-ink);
  --ora-color-text-secondary: var(--ora-p-slate);
  --ora-color-text-muted: var(--ora-p-muted);
  --ora-color-placeholder: var(--ora-p-muted);
  --ora-color-border: var(--ora-p-divider);
  --ora-color-control-border: var(--ora-p-control-border);
  --ora-color-primary: var(--ora-p-brand);
  --ora-color-primary-hover: var(--ora-p-brand-hover);
  --ora-color-primary-active: var(--ora-p-brand-active);
  --ora-color-on-primary: var(--ora-p-white);
  --ora-color-primary-soft: var(--ora-p-lavender);
  --ora-color-link: var(--ora-p-brand-hover);
  --ora-color-link-hover: var(--ora-p-brand-active);
  --ora-color-focus: var(--ora-p-brand-hover);
  --ora-color-disabled-bg: var(--ora-p-disabled);
  --ora-color-disabled-fg: var(--ora-p-muted);

  --ora-expert-zhou-bg: var(--ora-p-lavender);
  --ora-expert-zhou-fg: var(--ora-p-violet-ink);
  --ora-expert-lin-bg: var(--ora-p-mint);
  --ora-expert-lin-fg: var(--ora-p-green-ink);
  --ora-expert-lu-bg: var(--ora-p-lemon);
  --ora-expert-lu-fg: var(--ora-p-amber-ink);
  --ora-expert-xu-bg: var(--ora-p-peach);
  --ora-expert-xu-fg: var(--ora-p-orange-ink);

  --ora-color-success: var(--ora-p-green-ink);
  --ora-color-success-bg: var(--ora-p-mint);
  --ora-color-warning: var(--ora-p-amber-ink);
  --ora-color-warning-bg: var(--ora-p-lemon);
  --ora-color-error: var(--ora-p-red-ink);
  --ora-color-error-bg: var(--ora-p-rose);
  --ora-color-info: var(--ora-p-violet-ink);
  --ora-color-info-bg: var(--ora-p-lavender);

  /* White backing is part of each gradient. Keep data panels opaque. */
  --ora-gradient-hero:
    radial-gradient(ellipse at 4% 5%, var(--ora-p-glow-lime) 0%, transparent 52%),
    radial-gradient(ellipse at 96% 60%, var(--ora-p-glow-peach) 0%, transparent 54%),
    radial-gradient(ellipse at 78% 100%, var(--ora-p-glow-lilac) 0%, transparent 55%),
    var(--ora-color-surface);
  --ora-gradient-experts:
    radial-gradient(ellipse at 0% 0%, var(--ora-p-mint) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 0%, var(--ora-p-glow-lilac) 0%, transparent 56%),
    var(--ora-color-surface);
  --ora-gradient-download:
    radial-gradient(ellipse at 0% 0%, var(--ora-p-glow-peach) 0%, transparent 64%),
    radial-gradient(ellipse at 100% 0%, var(--ora-p-glow-lime) 0%, transparent 62%),
    radial-gradient(ellipse at 5% 100%, var(--ora-p-glow-lilac) 0%, transparent 56%),
    var(--ora-color-surface);
  /* v1.1: carry the same pastel palette through the full page. */
  --ora-gradient-results:
    radial-gradient(ellipse at 0% 90%, var(--ora-p-glow-lilac) 0%, transparent 58%),
    radial-gradient(ellipse at 100% 12%, var(--ora-p-mint) 0%, transparent 60%),
    var(--ora-color-surface);
  --ora-gradient-skills:
    radial-gradient(ellipse at 0% 34%, var(--ora-p-glow-lemon) 0%, transparent 65%),
    radial-gradient(ellipse at 100% 76%, var(--ora-p-glow-lilac) 0%, transparent 62%),
    var(--ora-color-surface);
  --ora-gradient-workbench:
    radial-gradient(ellipse at 2% 15%, var(--ora-p-glow-lilac) 0%, transparent 66%),
    radial-gradient(ellipse at 100% 90%, var(--ora-p-mint) 0%, transparent 68%),
    var(--ora-color-surface);
  --ora-gradient-service:
    radial-gradient(ellipse at 0% 65%, var(--ora-p-glow-peach) 0%, transparent 65%),
    radial-gradient(ellipse at 100% 0%, var(--ora-p-glow-lilac) 0%, transparent 58%),
    var(--ora-color-surface);
  --ora-gradient-pricing:
    radial-gradient(ellipse at 0% 6%, var(--ora-p-glow-lime) 0%, transparent 58%),
    radial-gradient(ellipse at 100% 90%, var(--ora-p-glow-lilac) 0%, transparent 66%),
    var(--ora-color-surface);
  --ora-gradient-faq:
    radial-gradient(ellipse at 0% 100%, var(--ora-p-glow-lilac) 0%, transparent 68%),
    radial-gradient(ellipse at 100% 0%, var(--ora-p-peach) 0%, transparent 60%),
    var(--ora-color-surface);
  --ora-gradient-card-zhou: linear-gradient(145deg, var(--ora-p-lavender), var(--ora-p-white) 65%);
  --ora-gradient-card-lin: linear-gradient(145deg, var(--ora-p-mint), var(--ora-p-white) 65%);
  --ora-gradient-card-lu: linear-gradient(145deg, var(--ora-p-lemon), var(--ora-p-white) 65%);
  --ora-gradient-card-xu: linear-gradient(145deg, var(--ora-p-peach), var(--ora-p-white) 65%);
  --ora-shadow-card: 0 8px 28px rgb(var(--ora-p-ink-rgb) / 5%);
  --ora-shadow-selected: 0 8px 24px rgb(var(--ora-p-brand-rgb) / 12%);

  /* 3. Component aliases */
  --ora-button-primary-bg: var(--ora-color-primary);
  --ora-button-primary-fg: var(--ora-color-on-primary);
  --ora-button-primary-bg-hover: var(--ora-color-primary-hover);
  --ora-button-primary-bg-active: var(--ora-color-primary-active);
  --ora-button-secondary-bg: var(--ora-color-surface);
  --ora-button-secondary-fg: var(--ora-color-text);
  --ora-button-secondary-border: var(--ora-color-primary);
  --ora-button-secondary-bg-hover: var(--ora-color-primary-soft);
  --ora-button-disabled-bg: var(--ora-color-disabled-bg);
  --ora-button-disabled-fg: var(--ora-color-disabled-fg);
  --ora-tab-active-bg: var(--ora-color-primary);
  --ora-tab-active-fg: var(--ora-color-on-primary);
  --ora-tab-inactive-bg: var(--ora-color-surface);
  --ora-tab-inactive-fg: var(--ora-color-text-secondary);
  --ora-expert-selected-border: var(--ora-color-primary);
  --ora-card-bg: var(--ora-color-surface);
  --ora-card-border: var(--ora-color-border);
  --ora-player-bg: var(--ora-color-surface);
  --ora-input-bg: var(--ora-color-surface);
  --ora-input-fg: var(--ora-color-text);
  --ora-input-border: var(--ora-color-control-border);
  --ora-focus-ring-color: var(--ora-color-focus);
  --ora-focus-ring-width: 3px;
  --ora-focus-ring-offset: 3px;
  --ora-color-transition-duration: 160ms;
}