/*
 * Fairyland theme – the single place to change brand colours, fonts and shape.
 * Component styles (site.css) only reference these variables.
 * Colours are taken from the rainbow lettering of the Fairyland logo.
 */
:root {
  /* Brand rainbow. "-strong" shades are dark enough for icons/text on the "-soft" tints. */
  --color-orange: #ff6b35;
  --color-orange-strong: #c2410c;
  --color-orange-soft: #fff0e8;
  --color-yellow: #ffc93c;
  --color-yellow-strong: #a16207;
  --color-yellow-soft: #fff8e1;
  --color-green: #3ec28f;
  --color-green-strong: #15803d;
  --color-green-soft: #e7f8f0;
  --color-blue: #3a86ff;
  --color-blue-strong: #1d4ed8;
  --color-blue-soft: #e8f1ff;
  --color-purple: #8f5bd7;
  --color-purple-strong: #6d28d9;
  --color-purple-soft: #f3ecff;
  --color-pink: #e63a8c;
  --color-pink-strong: #be185d;
  --color-pink-soft: #fde8f2;

  /* Primary actions: --color-primary is used for links and button gradients,
     --color-primary-dark for hover/active states. Both pass contrast with white text at button size. */
  --color-primary: #c2185b;
  --color-primary-dark: #9d1149;
  --color-primary-start: #d9480f;
  --gradient-primary: linear-gradient(135deg, var(--color-primary-start), var(--color-primary));
  --gradient-rainbow: linear-gradient(90deg, var(--color-orange), var(--color-yellow), var(--color-green), var(--color-blue), var(--color-purple), var(--color-pink));
  --gradient-hero: linear-gradient(160deg, #fff4e6 0%, #ffe9f2 55%, #eaf2ff 100%);

  /* Neutrals */
  --color-text: #2b2d42;
  --color-text-muted: #595d70;
  --color-heading: #22243a;
  --color-background: #fffdf9;
  --color-surface: #ffffff;
  --color-tint: #fff6ec;
  --color-border: #f0e4d7;
  --color-dark: #24263b;
  --color-dark-text: #e9e9f2;

  /* Feedback states */
  --color-success: #15803d;
  --color-success-soft: #e7f8f0;
  --color-error: #b91c1c;
  --color-error-soft: #fdecec;
  --color-focus: #1d4ed8;

  /* Typography */
  --font-heading: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Shape and depth */
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 14px rgba(43, 45, 66, 0.07);
  --shadow-md: 0 14px 34px rgba(43, 45, 66, 0.12);
  --shadow-lg: 0 24px 60px rgba(43, 45, 66, 0.18);

  /* Motion */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-reveal: 0.8s;

  /* Bootstrap mapped onto the brand tokens */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-background);
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: 194, 24, 91;
  --bs-link-hover-color: var(--color-primary-dark);
  --bs-link-hover-color-rgb: 157, 17, 73;
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-focus-ring-color: rgba(29, 78, 216, 0.35);
  --bs-form-invalid-color: var(--color-error);
  --bs-form-invalid-border-color: var(--color-error);
  --bs-form-valid-border-color: var(--color-success);
}