@layer reset, base, layout;

:root {
  --slide-aspect: 8 / 5;

  /* Core palette (from steady/website). Each hue defined once. */
  --color-white: oklch(100% 0 0);
  --color-asphalt: oklch(50% 0.03 265);
  --color-ultramarine: oklch(52% 0.26 275);
  --color-aqua: oklch(57% 0.11 195);
  --color-grape: oklch(50% 0.24 300);
  --color-sky: oklch(55% 0.15 250);
  --color-lemon: oklch(70% 0.2 95);
  --color-orange: oklch(62% 0.2 30);
  --color-rhubarb: oklch(55% 0.2 10);

  /* Step scale. Use as `oklch(from var(--color-X) var(--N))`
     to derive a tint/shade of any palette color. */
  --50: 98% calc(c / 8) h;
  --100: 95% calc(c / 4) h;
  --200: 90% calc(c / 2) h;
  --300: 85% c h;
  --400: 75% c h;
  --500: 55% c h;
  --600: 50% c h;
  --700: 35% calc(c / 1.5) h;
  --800: 25% calc(c / 2) h;
  --900: 21% calc(c / 2) h;
  --950: 19% calc(c / 2) h;

  /* Type axis tokens */
  --font-stretch: 100%; /* GT Pressura wdth axis: 100% normal, 150% extended */

  /* Semantic aliases. Change the right-hand side to retheme. */
  --color-bg: oklch(from var(--color-asphalt) var(--950));
  /* --color-primary: oklch(from var(--color-asphalt) var(--50)); */
  --color-primary: white;
  --color-secondary: oklch(from var(--color-ultramarine) var(--500));
  --color-tertiary: oklch(from var(--color-orange) var(--500));
  --color-emphasis: oklch(from var(--color-lemon) var(--500));
  --color-danger: oklch(from var(--color-rhubarb) var(--400));
}