/* Jijiboo canonical brand bridge.
   Load after legacy CSS token files so older pages resolve to the current
   orange/berry/grape palette without waiting for every CSS file to be rebuilt. */
:root {
  --kids-primary: #FF9F1C;
  --kids-primary-dark: #E6850A;
  --kids-primary-darker: #B86A08;
  --kids-primary-light: #FFE9C2;

  --kids-berry: #E4536B;
  --kids-berry-dark: #C93D55;
  --kids-berry-light: #FBDEE3;
  --kids-grape: #7C5CBF;
  --kids-sky: #2E8FC9;
  --kids-leaf: #2FA36B;
  --kids-canvas: #FFF9EE;
  --kids-ink: #2E2A3D;
  --kids-ink-soft: #625C77;
  --kids-white: #FFFFFF;

  --color-primary: var(--kids-primary);
  --color-primary-light: var(--kids-primary-light);
  --color-primary-dark: var(--kids-primary-dark);
  --color-primary-darker: var(--kids-primary-darker);
  --color-accent: var(--kids-berry);
  --color-success: var(--kids-leaf);
  --color-warning: var(--kids-primary);
  --color-error: var(--kids-berry);

  --parent-primary: var(--kids-primary);
  --parent-primary-dark: var(--kids-primary-dark);
  --parent-primary-light: var(--kids-primary-light);
  --admin-primary: var(--kids-primary);
  --admin-primary-dark: var(--kids-primary-dark);
  --admin-primary-light: var(--kids-primary-light);

  --kids-shadow-brand: 0 10px 30px rgba(255, 159, 28, 0.22);
  --kids-shadow-brand-strong: 0 16px 40px rgba(255, 159, 28, 0.3);
}

.bg-primary,
.btn-primary,
.nav-link-active,
.progress-bar-fill,
.kids-progress-fill {
  --tw-gradient-from: var(--kids-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(255, 159, 28, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: var(--kids-primary-dark) var(--tw-gradient-to-position);
}

.text-primary,
.tab-active,
.badge-primary {
  color: var(--kids-primary) !important;
}

.border-primary {
  border-color: var(--kids-primary) !important;
}

.focus-ring:focus,
.focus-visible:focus,
.btn:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  --tw-ring-color: rgba(255, 159, 28, 0.32) !important;
}

@media (prefers-contrast: high) {
  :root {
    --kids-primary: #B86A08;
    --kids-primary-dark: #7A4504;
    --kids-ink-soft: #3F3852;
  }
}
