/* default */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/* display / title
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');*/

/* icons */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0');
/*  variable: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
    caution: variable causes small start lag */

@font-face {
  font-family: 'opendyslexic';
  src: url('/font/OpenDyslexic-Regular.otf');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'opendyslexic';
  src: url('/font/OpenDyslexic-Italic.otf');
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: 'opendyslexic';
  src: url('/font/OpenDyslexic-Bold.otf');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'opendyslexic';
  src: url('/font/OpenDyslexic-Bold-Italic.otf');
  font-weight: bold;
  font-style: italic;
}

:root {
  color-scheme: light dark;
  /* Note : colors here are synchronised with
     * rs.metav.platform.utils.colors
     * Please update both if you modify some colors here */
  --black: #1c1b1f;
  --white: #ffffff;
  --green-good: #1cc12d;
  --red-bad: #ff4f4f;
  --light-grey: #f4f3f7;
  --grey: #d9d9d9;
  --dark-grey: #5f5f5f;
  --yellow: #fdcb4f;
  --fluo: #dcfc53;
  --purple: #8360e2;
  --blue-purple: #5200ff;
  --dark-purple: #002582;
  --light-green: #e5ffe7;
  --green: #26e37b;
  --pink: #ff80d4;
  --baby-blue: #72a1fd;
  --orange: #edaf02;
  --light-blue: #d0e9ff;
  --blue: #8eb5ff;
  --deep-blue: #1557ff;
  --dark-blue: #000f35;
  --beige: #fff2e5;
  --brick: #e36466;

  /* --power-primary-color: oklch(58.361% 0.25425 293.738); */
  --power-primary-color: oklab(0.54 -0.06 -0.16);
  --power-ui01-color: var(--power-primary-color);
  --power-secondary-color: #c0fb00;

  --color-palette-tag-01: var(--light-blue); /* NFT / Avatar */
  --color-palette-tag-02: var(--beige); /* 2D */
  --color-palette-tag-03: var(--light-green); /* 3D */

  --color-palette-info-01: var(--green-good); /* Good */
  --color-palette-info-02: var(--red-bad); /* Bad */

  --color-palette-graph-01: var(--dark-blue);
  --color-palette-graph-02: var(--dark-purple);
  --color-palette-graph-03: var(--deep-blue);
  --color-palette-graph-04: var(--blue);
  --color-palette-graph-05: var(--light-blue);

  --color-lib-asset: #a9a9a9;
  --color-lib-asset-model: oklab(0.66 -0.14 -0.06);
  --color-lib-asset-tex: var(--pink);
  --color-lib-asset-hdr: oklab(0.67 0.27 0.03);
  --color-lib-asset-material: oklab(0.62 0.23 0.13);
  --color-lib-asset-image: oklab(0.55 0.15 -0.27);
  --color-lib-asset-video: oklab(0.6 0.24 0.1);
  --color-lib-asset-viewer: oklab(0.77 -0.02 -0.1);
  --color-lib-asset-arbutton: #064900;
  --color-lib-quest: var(--orange);
  --color-lib-accessory: rgb(102, 174, 19);
  --color-lib-room: rgb(46, 104, 118);
  --color-lib-avatar: rgb(131, 37, 125);
  --color-lib-workflow: oklab(0.88 -0.06 0.08);

  --analytics-0: var(--light-grey);
  --analytics-1: var(--black);
  --analytics-2: var(--fluo);
  --analytics-3: var(--white);
  --analytics-4: var(--grey);
  --analytics-5: var(--purple);
  --analytics-6: var(--light-blue);
  --analytics-7: var(--blue);
  --analytics-8: var(--brick);
  --analytics-9: var(--light-grey);

  --background-main: linear-gradient(170deg, #f3f2f5, #e9e6ec);
  --background-main: #eceaea;
  --background-main: #1c1c1e;

  --text-primary: #1c1b1f;
  --text-on-dark: #f6f6f6;

  --primary-font: 'Manrope', sans-serif;
  --display-font: 'Figtree', sans-serif;

  --panel-padding: 1em;

  --border-main-color: #dbdbdb;
  /* --border-main-color: color-mix(in srgb, var(--text-on-dark) 85%, transparent); */

  --library-grid-minwidth: 10em;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

  /* new vars*/
  /* colors */
  --c-dark-bg: #282828;
  --c-bright-bg: #ffffff;
  --c-warn-bg: #ffcc00;
  --c-bright-dim: var(--light-grey);
  --c-dark-dim: rgba(0, 0, 0, 0.125);

  /* gaps / radius */
  --grid-gap: 0.25em;
  --grid-corners-radius: 0.25em;
  --inner-border-radius: max(calc(var(--grid-corners-radius) * 0.75), 0.15em);

  /* header */
  --header-height: 5em;

  /* inspector */
  --inspector-width-opened: 24em;
  --inspector-width: var(--inspector-width-opened);

  /* library */
  --library-height-closed: 3em;
  --library-height-open: 22em;
  --library-height: var(--library-height-closed);

  /* quicktools */
  --quicktools-width: 2.5em;

  /* animations */
  --spd-insp: 150ms;

  /* emboss panels */
  --border-highlight-color: rgba(255, 255, 255, 0.7);
  --border-shadow-color: rgba(0, 0, 0, 0.1);
  --border-emboss-size: 1px;
  --border-emboss-spread: 0px;
  --border-emboss: calc(
    var(--border-emboss-size) + var(--border-emboss-spread)
  );

  &:has(#inspector-inner:empty) {
    --inspector-width-opened: 0;
    #inspector-inner {
      display: none;
      opacity: 0;
    }
  }
}

/* accessibility: small dark mode */
.darkmode {
  /* --grid-gap: 0px; */
  --c-dark-bg: #ededed;
  --c-bright-bg: #353535;
  --c-warn-bg: #ffcc00;
  --c-bright-dim: #111112;
  --c-dark-dim: rgba(255, 255, 255, 0.125);
  --border-main-color: #474747;

  --background-main: #1c1c1e;

  --text-primary: #f6f6f6 !important;
  --text-on-dark: #1c1b1f;
  color: var(--text-primary);

  --border-highlight-color: rgb(44 44 44);
  --border-shadow-color: rgb(0 0 0);

  input,
  textarea,
  svg {
    color: var(--text-primary);
  }

  .smart-control-dot.pending::after {
    box-shadow:
      0 0 0.8em 0.25em rgba(255, 255, 255, 0.025),
      0 0 0.5em 0em var(--f-pending-color);
  }

  .foldable-section:not(.open) > .header {
    background-color: transparent;
    color: color-mix(in srgb, var(--text-primary) 70%, transparent);
  }

  /* #platform {
    background-color: #060606;
  }
  #mainlogo {
    filter: invert(1);
  } */
}

/* accessibility: high contrast mode */
body.highcontrast {
  --grid-gap: 0px;
  --c-dark-bg: #ffffff;
  --c-bright-bg: #000000;
  --c-warn-bg: #ffcc00;
  --c-bright-dim: #111112;
  --c-dark-dim: rgba(255, 255, 255, 0.125);
  --border-main-color: #fff;
  --background-main: #000000;
  --text-primary: #ffffff;
  --text-on-dark: #000000;
  --border-highlight-color: rgb(255, 255, 255);
  --border-shadow-color: rgb(0 0 0);
  --power-primary-color: #ffffff;
  --power-secondary-color: #000;
  --input-maincolor: #ff00a7;

  #platform {
    background-color: #060606;
  }
  #mainlogo {
    filter: invert(1);
  }
  .library-item-thumb {
    filter: contrast(1.25);
  }
  .foldable-section > .header > .t,
  .studio-tab .label {
    font-size: 10px;
  }
  .documentation-card-desc {
    font-weight: normal !important;
  }
}

/* accessibility : dyslexia */
body.opendyslexic {
  --primary-font: 'opendyslexic';
  --display-font: 'opendyslexic';
  letter-spacing: 0px;
  font-weight: 900;
}

/* accessibility : motion sickness */
body.motionsickness {
  --spd-insp: 0ms;
}

body,
.primaryFont {
  font-family: var(--primary-font);
}
.displayFont {
  font-family: var(--display-font);
}

body {
  color: var(--text-primary);
  background: #000;
}