@config "../tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}


.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html, #root {
    height: 100%;
    outline: none;
}

/* Layout */

.bg-token-border-light {
    background-color:rgba(0,0,0,.1);
    /*background-color:var(--border-light)*/
}
.bg-token-border-medium {
    background-color:rgba(0,0,0,.15);
    /*background-color:var(--border-medium)*/
}
.bg-token-main-surface-primary {
    background-color:#fff;
    /*background-color:var(--main-surface-primary)*/
}
.bg-token-main-surface-secondary {
    background-color:#f9f9f9;
    /*background-color:var(--main-surface-secondary)*/
}
.bg-token-main-surface-tertiary {
    background-color:#ececec;
    /*background-color:var(--main-surface-tertiary)*/
}
.bg-token-sidebar-surface-primary {
    background-color:#f9f9f9;
    /*! background-color:var(--sidebar-surface-primary); */
}
.bg-token-sidebar-surface-secondary {
    background-color:#ececec;
    /*background-color:var(--sidebar-surface-secondary)*/
}
.bg-token-sidebar-surface-tertiary {
    background-color:#ececec;
    /*background-color:var(--sidebar-surface-tertiary)*/
}
.bg-token-text-primary {
    background-color:#0d0d0d;
    /*background-color:var(--text-primary)*/
}
.bg-token-text-quaternary {
    background-color:#b4b4b4;
    /*background-color:var(--text-quaternary)*/
}
.bg-token-text-secondary {
    background-color:#424242;
    /*background-color:var(--text-secondary)*/
}
.bg-token-text-tertiary {
    background-color:#676767;
    /*background-color:var(--text-tertiary)*/
}

.gizmo-shadow-stroke {
    position:relative
}
.gizmo-shadow-stroke:after {
    --tw-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
    /*--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color);*/
    border-radius:9999px;
    bottom:0;
    content:"";
    left:0;
    position:absolute;
    right:0;
    top:0
}
.dark .gizmo-shadow-stroke:after,
.gizmo-shadow-stroke:after {
    box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);
    /*box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)*/
}
.dark .gizmo-shadow-stroke:after {
    --tw-shadow:inset 0 0 0 1px hsla(0,0%,100%,.2);
    /*--tw-shadow-colored:inset 0 0 0 1px var(--tw-shadow-color)*/
}

/* Other */

.btn {
    align-items:center;
    border-color:transparent;
    border-radius:.5rem;
    border-width:1px;
    display:inline-flex;
    font-weight:500;
    padding:.5rem .75rem;
    pointer-events:auto
}
.btn,
.snc .btn {
    font-size:.875rem;
    line-height:1.25rem
}
.snc .btn {
    font-size:var(--snc-text-subtitle)
}
@media (min-width:768px) {
    :root .snc .btn {
        font-size:.875rem;
        font-size:var(--snc-text-subtitle);
        line-height:1.25rem
    }
}
.btn:focus {
    outline:2px solid transparent;
    outline-offset:2px
}
.btn:disabled {
    cursor:not-allowed;
    opacity:.5
}
.btn:active {
    opacity:.8
}
.btn-primary {
    --tw-bg-opacity:1;
    --tw-text-opacity:1;
    background-color:rgba(16,163,127,var(--tw-bg-opacity));
    color:rgba(255,255,255,var(--tw-text-opacity))
}
.btn-primary:hover {
    --tw-bg-opacity:1;
    background-color:rgba(26,127,100,var(--tw-bg-opacity))
}
.btn-primary:focus {
    --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-offset-width:2px;
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)
}
.btn-primary.focus-visible {
    --tw-ring-opacity:1;
    --tw-ring-color:rgba(25,195,125,var(--tw-ring-opacity))
}
.btn-primary:focus-visible {
    --tw-ring-opacity:1;
    --tw-ring-color:rgba(25,195,125,var(--tw-ring-opacity))
}
.btn-danger {
    --tw-bg-opacity:1;
    --tw-text-opacity:1;
    background-color:rgba(185,28,28,var(--tw-bg-opacity));
    color:rgba(255,255,255,var(--tw-text-opacity))
}
.btn-danger:hover {
    --tw-bg-opacity:1;
    background-color:rgba(153,27,27,var(--tw-bg-opacity))
}
.btn-danger:focus {
    --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-offset-width:2px;
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)
}
.btn-danger.focus-visible {
    --tw-ring-opacity:1;
    --tw-ring-color:rgba(220,38,38,var(--tw-ring-opacity))
}
.btn-danger:focus-visible {
    --tw-ring-opacity:1;
    --tw-ring-color:rgba(220,38,38,var(--tw-ring-opacity))
}
.btn-danger:disabled:hover {
    --tw-bg-opacity:1;
    background-color:rgba(185,28,28,var(--tw-bg-opacity))
}
.btn-danger-outline {
    --tw-border-opacity:1;
    --tw-text-opacity:1;
    border-color:rgba(185,28,28,var(--tw-border-opacity));
    border-width:1px;
    color:rgba(185,28,28,var(--tw-text-opacity))
}
.btn-danger-outline:focus {
    --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    --tw-ring-offset-width:2px;
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 transparent)
}