@use "utilities/colors"  as *;
@use "utilities/mixins"  as *;
@use "utilities/metrics" as metric;


@mixin light {
  --primary             : #{ $primary };
  --on-primary          : #{ $white };
  --primary-hover       : #{ $primary-hover };
  --primary-active      : #{ $primary-active };

  --app                 : #{ $white };
  --on-app              : #{ colors(gray, 850)};

  --surface             : #{ colors(gray, 050)};
  --on-surface          : #{ colors(gray, 850) };
  --surface-hover       : #{ colors(gray, 025) };

  --heading-color       : #{ colors(gray, 900) };
  --text                : #{ colors(gray, 850) };
  --text-inverted       : #{ $white };

  --border              : #{ colors(gray, 150) };

  --highlight-color     : #{ colors(orange, 100)};

  @media (prefers-contrast: more) {
    --primary: #{colors(orange, 600)};  // temporary
  }

}


@mixin dark {
 @include light; //making everything light mode for now —Jp
}

@mixin reducedMotion {
  --tx-s : #{ metric.$ts };
  --tx-m : #{ metric.$tm };
  --tx-l : #{ metric.$tl };
  --tx-x : #{ metric.$tx };
  --tx-xx: #{ metric.$txx };

  --interactive-feedback: translateY(-.075em) scale(1.01);


  @media (prefers-reduced-motion: reduce) {
  --tx-s : 0s;
  --tx-m : 0s;
  --tx-l : 0s;
  --tx-x : 0s;
  --tx-xx: 0s;

    --interactive-feedback: translateY(0) scale(1);
    }
}



:root {
  //color-scheme: light dark; // both are supported
  color-scheme: only light; // only light is supported
  @include light;

  @media (prefers-color-scheme: dark) {
    @include dark;
  }
}

:root {
  @include reducedMotion;
}



// theming is coming later – Jp

// .theme-dark {
//   @include dark;
// }
//
// .theme-light {
//   @include light;
// }
