/*
 * Rabri public colour contract.
 * This file owns every palette and semantic colour token. Component styles
 * consume these tokens; they must not redefine the theme mode.
 */
:root {
  color-scheme: dark;
  --rb-palette-carbon: #181818;
  --rb-palette-graphite: #282828;
  --rb-palette-charcoal: #484647;
  --rb-palette-cerulean: #007ba7;
  --rb-palette-french-blue: #0072bb;
  --rb-palette-steel-blue: #4682b4;
  --rb-palette-metallic-blue: #32527b;
  --rb-palette-white: #fff;
  --rb-palette-ice: #f8fbfd;
  --rb-palette-mist: #e8f0f5;
  --rb-palette-ink: #18242e;
  --rb-palette-cloud: #c7d1d8;

  --rb-canvas: var(--rb-user-dark-bg, var(--rb-palette-carbon));
  --rb-canvas-deep: #101820;
  --rb-surface-1: var(--rb-user-dark-surface, var(--rb-palette-graphite));
  --rb-surface-2: #33383d;
  --rb-surface-raised: var(--rb-palette-charcoal);
  --rb-text-primary: #f8fbff;
  --rb-text-secondary: #c7d1d8;
  --rb-text-inverse: var(--rb-palette-ink);
  --rb-accent-bg: var(--rb-user-accent, var(--rb-palette-cerulean));
  --rb-accent-bg-hover: #006987;
  --rb-accent-secondary: var(--rb-user-accent-2, var(--rb-palette-french-blue));
  --rb-accent-text: #72c8df;
  --rb-action-fg: var(--rb-palette-white);
  --rb-control-bg: #111a21;
  --rb-control-fg: #f8fbff;
  --rb-control-placeholder: #c0cbd2;
  --rb-control-light-bg: var(--rb-palette-white);
  --rb-control-light-fg: var(--rb-palette-ink);
  --rb-border: rgba(127, 177, 207, 0.42);
  --rb-focus: #61c6e2;
  --rb-disabled-bg: #6b767d;
  --rb-disabled-fg: var(--rb-palette-white);

  /* Deliberately dark brand surfaces in both modes. */
  --rb-hero-bg: linear-gradient(145deg, #152433, #234b73);
  --rb-hero-text: #f8fbff;
  --rb-hero-muted: #c6d5df;
  --rb-brand-surface: #17232d;
  --rb-brand-surface-raised: #223746;
  --rb-brand-text: #f8fbff;
  --rb-brand-muted: #c6d5df;
  --rb-stats-bg: #006f98;
  --rb-stats-text: #fff;
  --rb-stats-muted: #dcecf3;

  /* Compatibility aliases consumed by existing component files. */
  --rb-bg: var(--rb-canvas);
  --rb-bg-deep: var(--rb-canvas-deep);
  --rb-surface: var(--rb-surface-1);
  --rb-surface-soft: color-mix(in srgb, var(--rb-surface-1) 82%, transparent);
  --rb-text: var(--rb-text-primary);
  --rb-muted: var(--rb-text-secondary);
  --rb-line: var(--rb-border);
  --rb-accent: var(--rb-accent-bg);
  --rb-accent-2: var(--rb-accent-secondary);
  --rb-warm-accent: var(--rb-palette-steel-blue);
  --rb-steel: var(--rb-palette-steel-blue);
  --rb-metallic: var(--rb-palette-metallic-blue);
  --rb-charcoal: var(--rb-palette-charcoal);
  --rb-white: var(--rb-palette-white);
  --rb-shadow: 0 28px 90px rgba(0, 0, 0, 0.32);
  --rb-glow: color-mix(in srgb, var(--rb-accent) 22%, transparent);
  --rb-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
  --rb-radius: 22px;
  --rb-shell: min(1440px, calc(100% - 40px));
  --rb-admin-bar-offset: 0px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --rb-canvas: var(--rb-user-light-bg, var(--rb-palette-mist));
  --rb-canvas-deep: #d9e6ed;
  --rb-surface-1: var(--rb-user-light-surface, var(--rb-palette-ice));
  --rb-surface-2: #edf3f6;
  --rb-surface-raised: var(--rb-palette-white);
  --rb-text-primary: var(--rb-user-light-text, var(--rb-palette-ink));
  --rb-text-secondary: #526675;
  --rb-text-inverse: #f8fbff;
  --rb-control-bg: var(--rb-palette-white);
  --rb-control-fg: var(--rb-palette-ink);
  --rb-control-placeholder: #617684;
  --rb-border: #a9c0ce;
  --rb-shadow: 0 24px 70px rgba(8, 48, 87, 0.14);
  --rb-hero-bg: linear-gradient(
    145deg,
    #152433,
    var(--rb-user-light-carbon, #32527b)
  );
  --rb-brand-surface: var(--rb-user-light-carbon, #32527b);
  --rb-brand-surface-raised: color-mix(
    in srgb,
    var(--rb-user-light-carbon, #32527b) 78%,
    #18242e
  );
}

@media (prefers-contrast: more) {
  :root {
    --rb-border: #6e9bb7;
  }
}