:root {
  /* Rix Renewables brand fonts */
  --rui-font-body: "Montserrat", Arial, sans-serif;
  --rui-font-heading: "Montserrat", Arial, sans-serif;
  --rui-base-font: var(--rui-font-body);

  /* Rix Renewables brand colours */
  --rui-color-primary: #26214e;
  --rui-color-secondary: #e4042c;
  --rui-color-tint: #eef0f6;
  --rui-color-dark: #161616;
  --rui-color-navy: #1c355e;
  --rui-color-white: #fff;
  --rui-color-black: #111827;
  --rui-color-neutral-30: #c9cede;
  --rui-color-highlight: #ffae00;

  /* Responsive type roles: desktop defaults */
  --rui-eyebrow-font-size: 12px;
  --rui-eyebrow-line-height: 16px;
  --rui-eyebrow-letter-spacing: 8px;
  --rui-hero-heading-font-size: 48px;
  --rui-hero-heading-line-height: 56px;
  --rui-heading-font-size: 30px;
  --rui-heading-line-height: 36px;
  --rui-body-font-size: 16px;
  --rui-body-line-height: 24px;
  --rui-button-font-size: 16px;
  --rui-button-line-height: 24px;

  /* Rix Renewables spacing, radii and effects */
  --rui-page-padding-x: 48px;
  --rui-page-padding-y: 96px;
  --rui-page-padding-y-compact: 48px;
  --rui-section-gap: 32px;
  --rui-section-header-gap: 12px;
  --rui-section-intro-gap: 32px;
  --rui-radius-button: 4px;
  --rui-radius-media: 10px;
  --rui-radius-small: 8px;
  --rui-outer-glow: 0 4px 16px rgba(0, 0, 0, 0.15);

  /* Shared button skin: component sizing and placement stay in shared/layout CSS. */
  --rui-button-font-family: var(--rui-font-heading);
  --rui-button-font-style: normal;
  --rui-button-font-weight: 700;
  --rui-button-letter-spacing: 0;
  --rui-button-border-width: 1px;
  --rui-button-border-radius: 4px;
  --rui-button-shadow: none;
  --rui-button-focus-ring: #91b3e8;
  --rui-button-primary-border: var(--rui-color-secondary);
  --rui-button-primary-background: var(--rui-color-secondary);
  --rui-button-primary-foreground: var(--rui-color-white);
  --rui-button-primary-hover-border: var(--rui-color-primary);
  --rui-button-primary-hover-background: var(--rui-color-primary);
  --rui-button-primary-hover-foreground: var(--rui-color-white);
  --rui-button-secondary-border: var(--rui-color-secondary);
  --rui-button-secondary-background: transparent;
  --rui-button-secondary-foreground: var(--rui-color-secondary);
  --rui-button-secondary-hover-border: var(--rui-color-primary);
  --rui-button-secondary-hover-background: var(--rui-color-primary);
  --rui-button-secondary-hover-foreground: var(--rui-color-white);
  --rui-button-tertiary-border: transparent;
  --rui-button-tertiary-background: transparent;
  --rui-button-tertiary-foreground: var(--rui-color-secondary);
  --rui-button-tertiary-hover-border: transparent;
  --rui-button-tertiary-hover-background: transparent;
  --rui-button-tertiary-hover-foreground: var(--rui-color-primary);

  --rui-announcement-background: var(--rui-color-primary);
  --rui-announcement-foreground: var(--rui-color-white);
  --rui-announcement-button-border: var(--rui-color-white);
  --rui-announcement-button-border-radius: 999px;
  --rui-announcement-button-shadow: none;
  --rui-announcement-button-background: var(--rui-color-white);
  --rui-announcement-button-foreground: var(--rui-color-primary);
  --rui-announcement-button-font-family: var(--rui-font-heading);
  --rui-announcement-button-font-size: 16px;
  --rui-announcement-button-font-weight: 700;
  --rui-announcement-button-line-height: 24px;
  --rui-announcement-button-focus-ring: #91b3e8;
  --rui-announcement-button-hover-border: var(--rui-color-tint);
  --rui-announcement-button-hover-background: var(--rui-color-tint);
  --rui-announcement-button-hover-foreground: var(--rui-color-primary);

  /* Content card skin */
  --rui-card-background: var(--rui-color-white);
  --rui-card-foreground: var(--rui-color-dark);
  --rui-card-heading: var(--rui-color-primary);
  --rui-card-link: var(--rui-color-primary);
  --rui-card-link-hover: var(--rui-color-secondary);
  --rui-card-border: transparent;
  --rui-card-border-radius: 8px;
  --rui-card-shadow: 0 4px 16px rgba(38, 33, 78, 0.14);
  --rui-card-media-background: var(--rui-color-tint);
  --rui-card-category-background: var(--rui-color-tint);
  --rui-card-category-foreground: var(--rui-color-primary);
  --rui-card-control-border: var(--rui-color-primary);
  --rui-card-control-background: var(--rui-color-white);
  --rui-card-control-foreground: var(--rui-color-primary);
  --rui-card-control-hover-background: var(--rui-color-primary);
  --rui-card-control-hover-foreground: var(--rui-color-white);
  --rui-card-control-focus-ring: #91b3e8;

  /* Hero background skin: component sizing and placement remain in layout CSS. */
  --rix-background-hero-background: var(--rui-color-primary);
  --rix-background-hero-foreground: var(--rui-color-white);
  --rix-background-hero-overlay: linear-gradient(90deg, rgba(38, 33, 78, 0.94), rgba(28, 53, 94, 0.78));
}

@media (max-width: 1024px) {
  :root {
    --rui-hero-heading-font-size: 40px;
    --rui-hero-heading-line-height: 48px;
    --rui-heading-font-size: 26px;
    --rui-heading-line-height: 32px;
    --rui-page-padding-x: 32px;
    --rui-page-padding-y: 72px;
    --rui-page-padding-y-compact: 36px;
    --rui-section-gap: 24px;
    --rui-section-intro-gap: 24px;
  }
}

@media (max-width: 600px) {
  :root {
    --rui-eyebrow-font-size: 11px;
    --rui-eyebrow-line-height: 14px;
    --rui-hero-heading-font-size: 32px;
    --rui-hero-heading-line-height: 40px;
    --rui-heading-font-size: 22px;
    --rui-heading-line-height: 28px;
    --rui-body-font-size: 15px;
    --rui-body-line-height: 22px;
    --rui-button-font-size: 15px;
    --rui-button-line-height: 22px;
    --rui-page-padding-x: 20px;
    --rui-page-padding-y: 48px;
    --rui-page-padding-y-compact: 24px;
    --rui-section-gap: 16px;
    --rui-section-header-gap: 8px;
    --rui-section-intro-gap: 20px;
    --rui-announcement-button-font-size: 15px;
    --rui-announcement-button-line-height: 22px;
  }
}