/* Registered so that type and chrome can fade when the page turns light. */
@property --surface-3 { syntax: '<color>'; inherits: true; initial-value: #1C1C22; }
@property --hairline { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .10); }
@property --hairline-strong { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .18); }
@property --glass { syntax: '<color>'; inherits: true; initial-value: rgba(11, 11, 15, .55); }
@property --text-primary { syntax: '<color>'; inherits: true; initial-value: #F5F5F2; }
@property --text-secondary { syntax: '<color>'; inherits: true; initial-value: #9B9BA3; }
@property --text-muted { syntax: '<color>'; inherits: true; initial-value: #85858D; }
@property --text-rest { syntax: '<color>'; inherits: true; initial-value: #B8B8BE; }

:root {
  color-scheme: dark;

  --canvas: #050507;
  --surface-1: #0B0B0F;
  --surface-2: #131318;
  --surface-3: #1C1C22;
  --hairline: rgba(255, 255, 255, .10);
  --hairline-strong: rgba(255, 255, 255, .18);
  --glass: rgba(11, 11, 15, .55);

  --text-primary: #F5F5F2;
  --text-secondary: #9B9BA3;
  --text-muted: #85858D;
  --text-dim: #5C5C64;
  --text-rest: #B8B8BE;

  --star: #FFC857;
  --tracker-off: #3A3A42;

  --icon-cliff-heroes: oklch(0.74 0.15 40);
  --icon-microracer: oklch(0.74 0.15 230);
  --icon-combine-hit: oklch(0.74 0.15 150);
  --icon-clawvaganza: oklch(0.74 0.15 340);

  --ease-glide: cubic-bezier(.19, 1, .22, 1);
  --dur-micro: 200ms;
  --dur-state: 450ms;
  --dur-reveal: 900ms;
  --dur-hero: 1250ms;

  --font-display: 'Panchang', sans-serif;
  --font-heading: 'Clash Grotesk', sans-serif;
  --font-body: 'Switzer', sans-serif;
  --font-mono: 'Azeret Mono', monospace;

  --gutter: clamp(16px, 4vw, 64px);
  --section-top: 12.4vh;

  --key-rest: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
  --key-hover: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .18);
  --key-pressed: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .18);

  --fade-tone: .35s;
}

/* What sits on the light page, flipped once by js/end.js. The nav and the sections around the change are all that's in view. */
.nav, .games, .end {
  color: var(--text-primary);
  transition:
    --surface-3 var(--fade-tone) linear,
    --hairline var(--fade-tone) linear,
    --hairline-strong var(--fade-tone) linear,
    --glass var(--fade-tone) linear,
    --text-primary var(--fade-tone) linear,
    --text-secondary var(--fade-tone) linear,
    --text-muted var(--fade-tone) linear,
    --text-rest var(--fade-tone) linear;
}
.is-light .nav, .is-light .games, .is-light .end {
  --surface-3: #DCDCD7;
  --hairline: rgba(5, 5, 7, .12);
  --hairline-strong: rgba(5, 5, 7, .22);
  --glass: rgba(245, 245, 242, .6);

  --text-primary: #050507;
  --text-secondary: #55555C;
  --text-muted: #63636A;
  --text-rest: #2C2C31;
}

/* Fully light: an overscroll past the end of the page shows the same colour. */
:root.is-paper { background: #F5F5F2; }