/* ----------------------------------------------------------------------------
DO NOT EDIT DIRECTLY

This is a theme by Sanico Software, please override global values in a file
called _overrides.css

---------------------------------------------------------------------------- */
@layer reset, tokens, base, components;

/* ----------------------------------------------------------------------------
Media Queries
sm: 640px - @media (min-width: 640px) { ... }
md: 768px - @media (min-width: 768px) { ... }
lg: 1024px - @media (min-width: 1024px) { ... }
xl: 1280px - @media (min-width: 1280px) { ... }
---------------------------------------------------------------------------- */

@layer tokens {
  :root {
    /* ---------------------------------------------------------------------------
  typography
  --------------------------------------------------------------------------- */

    /* font properties */
    --font-weight-xs: 200;
    --font-weight-sm: 325;
    --font-weight-md: 400;
    --font-weight-lg: 500;
    --font-weight-xl: 700;
    --font-weight-xxl: 800;
    --font-weight: var(--font-weight-sm);

    /* font size */
    --font-size-base: max(1.125em, min(calc(0.675em + 0.5vw), 1.875em));
    --font-size-scale-sm: 1.2;
    --font-size-scale-lg: 1.333;
    --font-size-xxxs: calc(var(--font-size-xxs) / var(--font-size-scale-sm));
    --font-size-xxs: calc(var(--font-size-xs) / var(--font-size-scale-sm));
    --font-size-xs: calc(var(--font-size-sm) / var(--font-size-scale-sm));
    --font-size-sm: calc(var(--font-size-md) / var(--font-size-scale-sm));
    --font-size-md: 1em;
    --font-size-lg: calc(var(--font-size-md) * var(--font-size-scale-lg));
    --font-size-xl: calc(var(--font-size-lg) * var(--font-size-scale-lg));
    --font-size-xxl: calc(var(--font-size-xl) * var(--font-size-scale-lg));
    --font-size-xxxl: calc(var(--font-size-xxl) * var(--font-size-scale-lg));
    --font-size-xxxxl: calc(var(--font-size-xxxl) * var(--font-size-scale-lg));
    --font-size-poster: clamp(3.5em, 8vw, 7em);

    /* line length */
    --line-length-xs: 24ch;
    --line-length-sm: 48ch;
    --line-length-md: 64ch;
    --line-length-lg: 72ch;
    --line-length-xl: 80ch;

    /* line height */
    --line-height-base: 1.1;
    --line-height-scale: 1.25;
    --line-height-xs: calc(var(--line-height-sm) / var(--line-height-scale));
    --line-height-sm: var(--line-height-base);
    --line-height-md: calc(var(--line-height-sm) * var(--line-height-scale));
    --line-height-lg: calc(var(--line-height-md) * var(--line-height-scale));
    --line-height-fluid: calc(0.6rem + 1em);

    /* letter spacing */
    --letter-spacing-sm: -0.025em;
    --letter-spacing-md: 0;
    --letter-spacing-lg: 0.1em;
    --letter-spacing-xl: 0.3em;

    /* ---------------------------------------------------------------------------
  color
  --------------------------------------------------------------------------- */

    /* tints & shades */
    --0: 100% 0 h;
    --50: 97% calc(c / 16) h;
    --100: 94% calc(c / 4) h;
    --200: 88% c h;
    --300: 70% c h;
    --400: 60% c h;
    --500: 50% c h;
    --600: 40% c h;
    --700: 30% c h;
    --800: 22% calc(c / 1.5) h;
    --900: 18% calc(c / 2) h;

    /* source colors */
    --neutral: oklch(80% 0.01 300deg);
    --primary: oklch(30% 0.3 300deg);
    --secondary: oklch(70% 0.15 200deg);

    --neutral-0: oklch(from var(--neutral) var(--0));
    --neutral-50: oklch(from var(--neutral) var(--50));
    --neutral-100: oklch(from var(--neutral) var(--100));
    --neutral-200: oklch(from var(--neutral) var(--200));
    --neutral-300: oklch(from var(--neutral) var(--300));
    --neutral-400: oklch(from var(--neutral) var(--400));
    --neutral-500: oklch(from var(--neutral) var(--500));
    --neutral-600: oklch(from var(--neutral) var(--600));
    --neutral-700: oklch(from var(--neutral) var(--700));
    --neutral-800: oklch(from var(--neutral) var(--800));
    --neutral-900: oklch(from var(--neutral) var(--900));

    --primary-0: oklch(from var(--primary) var(--0));
    --primary-50: oklch(from var(--primary) var(--50));
    --primary-100: oklch(from var(--primary) var(--100));
    --primary-200: oklch(from var(--primary) var(--200));
    --primary-300: oklch(from var(--primary) var(--300));
    --primary-400: oklch(from var(--primary) var(--400));
    --primary-500: oklch(from var(--primary) var(--500));
    --primary-600: oklch(from var(--primary) var(--600));
    --primary-700: oklch(from var(--primary) var(--700));
    --primary-800: oklch(from var(--primary) var(--800));
    --primary-900: oklch(from var(--primary) var(--900));

    --secondary-0: oklch(from var(--secondary) var(--0));
    --secondary-50: oklch(from var(--secondary) var(--50));
    --secondary-100: oklch(from var(--secondary) var(--100));
    --secondary-200: oklch(from var(--secondary) var(--200));
    --secondary-300: oklch(from var(--secondary) var(--300));
    --secondary-400: oklch(from var(--secondary) var(--400));
    --secondary-500: oklch(from var(--secondary) var(--500));
    --secondary-600: oklch(from var(--secondary) var(--600));
    --secondary-700: oklch(from var(--secondary) var(--700));
    --secondary-800: oklch(from var(--secondary) var(--800));
    --secondary-900: oklch(from var(--secondary) var(--900));

    /* preset colors - light theme */
    --color-text: var(--neutral-800);
    --color-bg: white;
    --color-bg-dark: var(--neutral-50);
    --color-border: var(--neutral-200);
    --color-shadow: black;

    /* ---------------------------------------------------------------------------
  spacing
  --------------------------------------------------------------------------- */
    --space-scale: 1.666;
    --space-base: 1.5rem;
    --space-xxs: calc(var(--space-xs) / var(--space-scale));
    --space-xs: calc(var(--space-sm) / var(--space-scale));
    --space-sm: calc(var(--space-base) / var(--space-scale));
    --space-md: var(--space-base);
    --space-lg: calc(var(--space-md) * var(--space-scale));
    --space-xl: calc(var(--space-lg) * var(--space-scale));
    --space-xxl: calc(var(--space-xl) * var(--space-scale));
    --space-xxxl: calc(var(--space-xxl) * var(--space-scale));
    --space-flex: clamp(8rem, 20vw, 16rem);

    /* ---------------------------------------------------------------------------
  borders
  --------------------------------------------------------------------------- */

    /* border radius */
    --border-radius-0: 0;
    --border-radius-sm: 0.2rem;
    --border-radius-md: 0.4rem;
    --border-radius-lg: 0.8rem;
    --border-radius-xl: 1.6rem;
    --border-radius-full: 9999px;

    /* border width */
    --border-width-sm: 0.0625rem;
    --border-width-md: 0.1rem;
    --border-width-lg: 0.25rem;

    /* ---------------------------------------------------------------------------
  z-index
  --------------------------------------------------------------------------- */
    --z-0: 0;
    --z-1: 1;
    --z-2: 2;
    --z-3: 3;
    --z-4: 4;
    --z-5: 5;

    /* ---------------------------------------------------------------------------
  shadows
  --------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px -1px oklch(from var(--color-shadow) l c h / 10%);
    --shadow-md:
      0 -1px 3px 0 oklch(from var(--color-shadow) l c h / 2%),
      0 1px 2px -5px oklch(from var(--color-shadow) l c h / 2%),
      0 2px 5px -5px oklch(from var(--color-shadow) l c h / 4%),
      0 4px 12px -5px oklch(from var(--color-shadow) l c h / 5%),
      0 12px 15px -5px oklch(from var(--color-shadow) l c h / 7%);
    --shadow-lg:
      0 5px 5px -2px oklch(from var(--color-shadow) l c h / 6%),
      0 10px 10px -2px oklch(from var(--color-shadow) l c h / 7%),
      0 20px 20px -2px oklch(from var(--color-shadow) l c h / 8%),
      0 40px 40px -2px oklch(from var(--color-shadow) l c h / 9%);

    /* ---------------------------------------------------------------------------
  length
  --------------------------------------------------------------------------- */
    --length-0: 0rem;
    --length-0_5: 0.125rem; /* 0.5 */
    --length-1: 0.25rem;
    --length-1_5: 0.375rem;
    --length-2: 0.5rem;
    --length-2_5: 0.625rem;
    --length-3: 0.75rem;
    --length-3_5: 0.875rem;
    --length-4: 1rem;
    --length-5: 1.25rem;
    --length-6: 1.5rem;
    --length-7: 1.75rem;
    --length-8: 2rem;
    --length-9: 2.25rem;
    --length-10: 2.5rem;
    --length-11: 2.75rem;
    --length-12: 3rem;
    --length-14: 3.5rem;
    --length-16: 4rem;
    --length-20: 5rem;
    --length-24: 6rem;
    --length-28: 7rem;
    --length-32: 8rem;
    --length-36: 9rem;
    --length-40: 10rem;
    --length-44: 11rem;
    --length-48: 12rem;
    --length-52: 13rem;
    --length-56: 14rem;
    --length-60: 15rem;
    --length-64: 16rem;
    --length-72: 18rem;
    --length-80: 20rem;
    --length-96: 24rem;

    /* border radius */
    --max-length-xxxs: 16rem; /* 256px, was 3xs */
    --max-length-xxs: 18rem; /* 288px, was 2xs */
    --max-length-xs: 20rem; /* 320px */
    --max-length-sm: 24rem; /* 384px */
    --max-length-md: 28rem; /* 448px */
    --max-length-lg: 32rem; /* 512px */
    --max-length-xl: 36rem; /* 576px */
    --max-length-2xl: 42rem; /* 672px */
    --max-length-3xl: 48rem; /* 768px */
    --max-length-4xl: 56rem; /* 896px */
    --max-length-5xl: 64rem; /* 1024px */
    --max-length-6xl: 72rem; /* 1152px */
    --max-length-7xl: 80rem; /* 1280px */

    @media (prefers-color-scheme: dark) {
      /* --color-text: var(--neutral-100); */
      /* --color-bg: var(--neutral-800); */
      /* --color-bg-dark: var(--neutral-900); */
      /* --color-border: var(--neutral-600); */

      --900: 100% 0 h;
      --800: 97% calc(c / 16) h;
      --700: 94% calc(c / 4) h;
      --600: 88% c h;
      --500: 70% c h;
      --400: 60% c h;
      --300: 50% c h;
      --200: 40% c h;
      --100: 30% c h;
      --50: 22% calc(c / 1.5) h;
      --0: 18% calc(c / 2) h;
    }
  }

  html {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: clip;
    font-weight: var(--font-weight);
    font-size: var(--font-size-base);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-header);
  }
}