@layer components {
  .admin {
    /* Primary shades resolve to the secondary colour scheme on admin pages */
    --color-primary-0: oklch(
      from var(--default-color-secondary) var(--shade-0)
    );
    --color-primary-1: oklch(
      from var(--default-color-secondary) var(--shade-1)
    );
    --color-primary-2: oklch(
      from var(--default-color-secondary) var(--shade-2)
    );
    --color-primary-3: oklch(
      from var(--default-color-secondary) var(--shade-3)
    );
    --color-primary-4: oklch(
      from var(--default-color-secondary) var(--shade-4)
    );
    --color-primary-5: oklch(
      from var(--default-color-secondary) var(--shade-5)
    );
    --color-primary-6: oklch(
      from var(--default-color-secondary) var(--shade-6)
    );
    --color-primary-7: oklch(
      from var(--default-color-secondary) var(--shade-7)
    );
    --color-primary-8: oklch(
      from var(--default-color-secondary) var(--shade-8)
    );
    --color-primary-9: oklch(
      from var(--default-color-secondary) var(--shade-9)
    );

    /* Secondary shades resolve to the primary colour scheme on admin pages */
    --color-secondary-0: oklch(
      from var(--default-color-primary) var(--shade-0)
    );
    --color-secondary-1: oklch(
      from var(--default-color-primary) var(--shade-1)
    );
    --color-secondary-2: oklch(
      from var(--default-color-primary) var(--shade-2)
    );
    --color-secondary-3: oklch(
      from var(--default-color-primary) var(--shade-3)
    );
    --color-secondary-4: oklch(
      from var(--default-color-primary) var(--shade-4)
    );
    --color-secondary-5: oklch(
      from var(--default-color-primary) var(--shade-5)
    );
    --color-secondary-6: oklch(
      from var(--default-color-primary) var(--shade-6)
    );
    --color-secondary-7: oklch(
      from var(--default-color-primary) var(--shade-7)
    );
    --color-secondary-8: oklch(
      from var(--default-color-primary) var(--shade-8)
    );
    --color-secondary-9: oklch(
      from var(--default-color-primary) var(--shade-9)
    );
  }
}