@supports (background: oklch(0 0 0)) {
  :root {
    --gc-color-background: oklch(100% 0 0);
    --gc-color-background-variant: oklch(97.4% 0.003 313.7);
    --gc-color-on-background: oklch(20.49% 0.042 276.1);
    --gc-color-on-background-variant: oklch(40% 0.03 276.1);
    --gc-color-link: oklch(53.35% 0.169 260.7);
    --gc-color-link-hover: oklch(43.35% 0.169 260.7);
    --gc-color-stroke: oklch(80% 0 0);
    --gc-color-stroke-variant: oklch(90% 0 0);
    --gc-color-primary-button: oklch(25.35% 0.09 258.88);
    --gc-color-primary-button-hover: oklch(59.9% 0.176 185.64);
    --gc-color-primary-button-stroke: oklch(25.35% 0.09 258.88);
    --gc-color-on-primary-button: oklch(100% 0 0);
    --gc-color-on-primary-button-hover: oklch(100% 0 0);
    --gc-color-secondary-button: oklch(0% 0 0 / 0);
    --gc-color-secondary-button-hover: oklch(59.9% 0.176 185.64);
    --gc-color-secondary-button-stroke: oklch(59.9% 0.176 185.64);
    --gc-color-on-secondary-button: oklch(59.9% 0.176 185.64);
    --gc-color-on-secondary-button-hover: oklch(20.49% 0.042 276.1);
  }
}

@supports not (background: oklch(0 0 0)) {
  :root {
    --gc-color-background: #ffffff;
    --gc-color-background-variant: #f0f3fa;
    --gc-color-on-background: #25354c;
    --gc-color-on-background-variant: #666666;
    --gc-color-link: #2a66d5;
    --gc-color-link-hover: #1a4cb8;
    --gc-color-stroke: #cccccc;
    --gc-color-stroke-variant: #e6e6e6;
    --gc-color-primary-button: #1b3c65;
    --gc-color-primary-button-hover: #87dee1;
    --gc-color-primary-button-stroke: #1b3c65;
    --gc-color-on-primary-button: #ffffff;
    --gc-color-on-primary-button-hover: #ffffff;
    --gc-color-secondary-button: transparent;
    --gc-color-secondary-button-hover: #87dee1;
    --gc-color-secondary-button-stroke: #87dee1;
    --gc-color-on-secondary-button: #87dee1;
    --gc-color-on-secondary-button-hover: #25354c;
  }
}

@property --gc-color-background {
  syntax: '<color>';
  initial-value: #ffffff;
  inherits: false;
}

@property --gc-color-background-variant {
  syntax: '<color>';
  initial-value: #f0f3fa;
  inherits: false;
}

@property --gc-color-on-background {
  syntax: '<color>';
  initial-value: #25354c;
  inherits: false;
}

@property --gc-color-on-background-variant {
  syntax: '<color>';
  initial-value: #666666;
  inherits: false;
}

@property --gc-color-link {
  syntax: '<color>';
  initial-value: #2a66d5;
  inherits: false;
}

@property --gc-color-link-hover {
  syntax: '<color>';
  initial-value: #1a4cb8;
  inherits: false;
}

@property --gc-color-stroke {
  syntax: '<color>';
  initial-value: #cccccc;
  inherits: false;
}

@property --gc-color-stroke-variant {
  syntax: '<color>';
  initial-value: #e6e6e6;
  inherits: false;
}

@property --gc-color-primary-button {
  syntax: '<color>';
  initial-value: #1b3c65;
  inherits: false;
}

@property --gc-color-primary-button-hover {
  syntax: '<color>';
  initial-value: #87dee1;
  inherits: false;
}

@property --gc-color-primary-button-stroke {
  syntax: '<color>';
  initial-value: #1b3c65;
  inherits: false;
}

@property --gc-color-on-primary-button {
  syntax: '<color>';
  initial-value: #ffffff;
  inherits: false;
}

@property --gc-color-on-primary-button-hover {
  syntax: '<color>';
  initial-value: #ffffff;
  inherits: false;
}

@property --gc-color-secondary-button {
  syntax: '<color>';
  initial-value: transparent;
  inherits: false;
}

@property --gc-color-secondary-button-hover {
  syntax: '<color>';
  initial-value: #87dee1;
  inherits: false;
}

@property --gc-color-secondary-button-stroke {
  syntax: '<color>';
  initial-value: #87dee1;
  inherits: false;
}

@property --gc-color-on-secondary-button {
  syntax: '<color>';
  initial-value: #87dee1;
  inherits: false;
}

@property --gc-color-on-secondary-button-hover {
  syntax: '<color>';
  initial-value: #25354c;
  inherits: false;
}