/*--- Font Definitions -----------------------------------------------------*/

@font-face {
  ascent-override: 45%;
  descent-override: 9%;
  font-display: block;
  font-family: "Adishila Samskrta";
  line-gap-override: 0%;
  size-adjust: 135%;
  src: url("/public/fonts/adishila_samskrta.woff2") format("woff2");
}

@font-face {
  ascent-override: 100%;
  descent-override: 50%;
  font-display: block;
  font-family: "Chandas";
  line-gap-override: 0%;
  src: url("/public/fonts/chandas.woff2") format("woff2");
}

@font-face {
  font-display: block;
  font-family: "EB Garamond";
  src: url("/public/fonts/eb_garamond.woff2") format("woff2-variations");
}

@font-face {
  font-display: block;
  font-family: "EB Garamond";
  font-style: italic;
  src: url("/public/fonts/eb_garamond_it.woff2") format("woff2-variations");
}

@font-face {
  font-display: block;
  font-family: "Iosevka Term Slab NF";
  src: url("/public/fonts/iosevka_term_slab_nf.woff2") format("woff2");
}

@font-face {
  font-display: block;
  font-family: "Quicksand";
  src: url("/public/fonts/quicksand.woff2") format("woff2-variations");
}

@font-face {
  font-display: block;
  font-family: "Shantell Sans";
  src: url("/public/fonts/shantell_sans.woff2") format("woff2-variations");
}

@font-face {
  ascent-override: 60%;
  descent-override: 13%;
  font-display: block;
  font-family: "Siddhanta";
  font-feature-settings: "ss01" on, "ss05" on;
  line-gap-override: 0%;
  src: url("/public/fonts/siddhanta.woff2") format("woff2-variations");
}

@font-face {
  ascent-override: 100%;
  descent-override: 50%;
  font-display: block;
  font-family: "Tiro Kannada";
  line-gap-override: 0%;
  src: url("/public/fonts/tiro_kannada.woff2") format("woff2");
}

@font-face {
  ascent-override: 100%;
  descent-override: 50%;
  font-display: block;
  font-family: "Uttara";
  line-gap-override: 0%;
  src: url("/public/fonts/uttara.woff2") format("woff2");
}

@font-face {
  ascent-override: 100%;
  descent-override: 50%;
  font-display: block;
  font-family: "Vagisha";
  line-gap-override: 0%;
  src: url("/public/fonts/vagisha.woff2") format("woff2");
}

/*--- Variables --------------------------------------------------------------*/

:root {
  /* Catppucins Latte */
  --catppuccin-latte-rosewater: #dc8a78;
  --catppuccin-latte-flamingo: #dd7878;
  --catppuccin-latte-pink: #ea76cb;
  --catppuccin-latte-mauve: #8839ef;
  --catppuccin-latte-red: #d20f39;
  --catppuccin-latte-maroon: #e64553;
  --catppuccin-latte-peach: #fe640b;
  --catppuccin-latte-yellow: #df8e1d;
  --catppuccin-latte-green: #40a02b;
  --catppuccin-latte-teal: #179299;
  --catppuccin-latte-sky: #04a5e5;
  --catppuccin-latte-sapphire: #209fb5;
  --catppuccin-latte-blue: #1e66f5;
  --catppuccin-latte-lavender: #7287fd;
  --catppuccin-latte-text: #4c4f69;
  --catppuccin-latte-subtext-1: #5c5f77;
  --catppuccin-latte-subtext-0: #6c6f85;
  --catppuccin-latte-overlay-2: #7c7f93;
  --catppuccin-latte-overlay-1: #8c8fa1;
  --catppuccin-latte-overlay-0: #9ca0b0;
  --catppuccin-latte-surface-2: #acb0be;
  --catppuccin-latte-surface-1: #bcc0cc;
  --catppuccin-latte-surface-0: #ccd0da;
  --catppuccin-latte-base: #eff1f5;
  --catppuccin-latte-mantle: #e6e9ef;
  --catppuccin-latte-crust: #dce0e8;

  /* Catppuccin Mocha */
  --catppuccin-mocha-rosewater: #f5e0dc;
  --catppuccin-mocha-flamingo: #f2cdcd;
  --catppuccin-mocha-pink: #f5c2e7;
  --catppuccin-mocha-mauve: #cba6f7;
  --catppuccin-mocha-red: #f38ba8;
  --catppuccin-mocha-maroon: #eba0ac;
  --catppuccin-mocha-peach: #fab387;
  --catppuccin-mocha-yellow: #f9e2af;
  --catppuccin-mocha-green: #a6e3a1;
  --catppuccin-mocha-teal: #94e2d5;
  --catppuccin-mocha-sky: #89dceb;
  --catppuccin-mocha-sapphire: #74c7ec;
  --catppuccin-mocha-blue: #89b4fa;
  --catppuccin-mocha-lavender: #b4befe;
  --catppuccin-mocha-text: #cdd6f4;
  --catppuccin-mocha-subtext-1: #bac2de;
  --catppuccin-mocha-subtext-0: #a6adc8;
  --catppuccin-mocha-overlay-2: #9399b2;
  --catppuccin-mocha-overlay-1: #7f849c;
  --catppuccin-mocha-overlay-0: #6c7086;
  --catppuccin-mocha-surface-2: #585b70;
  --catppuccin-mocha-surface-1: #45475a;
  --catppuccin-mocha-surface-0: #313244;
  --catppuccin-mocha-base: #1e1e2e;
  --catppuccin-mocha-mantle: #181825;
  --catppuccin-mocha-crust: #11111b;

  --font-family-hand-written: "Shantell Sans", cursive;
  --font-family-monospace: "Iosevka Term Slab NF", monospace;
  --font-family-sans-serif: "Quicksand", sans-serif;
  --font-family-serif: "EB Garamond", serif;

  --font-family-devanagari-engine: "Siddhanta", serif;
  --font-family-devanagari-heritage-press: "Adishila Samskrta", serif;
  --font-family-devanagari-north-style: "Uttara", serif;
  --font-family-devanagari-south-style: "Chandas", serif;

  --font-family-kannada-engine: "Vagisha", serif;
  --font-family-kannada-heritage-press: "Tiro Kannada", serif;

  --font-family-en: var(--font-family-serif);
  --font-family-sa: var(--font-family-devanagari-south-style);
  --font-family-kn: var(--font-family-kannada-engine);

  /*
  --font-size-en-3xs:  clamp(0.55rem, 0.4rem + 0.5vw, 0.75rem);
  --font-size-en-2xs:  clamp(0.65rem, 0.55rem + 0.5vw, 0.9rem);
  --font-size-en-xs:   clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem);
  --font-size-en-sm:   clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem);
  --font-size-en-base: clamp(1.1rem, 0.9rem + 0.5vw, 1.3rem);
  --font-size-en-md:   clamp(1.2rem, 1.0rem + 0.5vw, 1.45rem);
  --font-size-en-lg:   clamp(1.35rem, 1.15rem + 0.5vw, 1.6rem);
  --font-size-en-xl:   clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem);
  --font-size-en-2xl:  clamp(1.75rem, 1.55rem + 0.5vw, 2.0rem);
  --font-size-en-3xl:  clamp(1.875rem, 1.675rem + 0.5vw, 2.15rem);
  --font-size-en-4xl:  clamp(2.0rem, 1.8rem + 0.5vw, 2.3rem);
  */

  --dpi-scale: 1;

  --font-size-en-3xs:  calc(0.6rem * var(--dpi-scale));
  --font-size-en-2xs:  calc(0.75rem * var(--dpi-scale));
  --font-size-en-xs:   calc(0.9rem * var(--dpi-scale));
  --font-size-en-sm:   calc(1.0rem * var(--dpi-scale));
  --font-size-en-base: calc(1.1rem * var(--dpi-scale));
  --font-size-en-md:   calc(1.2rem * var(--dpi-scale));
  --font-size-en-lg:   calc(1.35rem * var(--dpi-scale));
  --font-size-en-xl:   calc(1.5rem * var(--dpi-scale));
  --font-size-en-2xl:  calc(1.75rem * var(--dpi-scale));
  --font-size-en-3xl:  calc(1.875rem * var(--dpi-scale));
  --font-size-en-4xl:  calc(2.0rem * var(--dpi-scale));

  --font-size-sa-3xs: var(--font-size-en-3xs);
  --font-size-sa-2xs: var(--font-size-en-2xs);
  --font-size-sa-xs: var(--font-size-en-xs);
  --font-size-sa-sm: var(--font-size-en-sm);
  --font-size-sa-base: var(--font-size-en-base);
  --font-size-sa-md: var(--font-size-en-md);
  --font-size-sa-lg: var(--font-size-en-lg);
  --font-size-sa-xl: var(--font-size-en-xl);
  --font-size-sa-2xl: var(--font-size-en-2xl);
  --font-size-sa-3xl: var(--font-size-en-3xl);
  --font-size-sa-4xl: var(--font-size-en-4xl);

  --font-size-kn-3xs: var(--font-size-sa-3xs);
  --font-size-kn-2xs: var(--font-size-sa-2xs);
  --font-size-kn-xs: var(--font-size-sa-xs);
  --font-size-kn-sm: var(--font-size-sa-sm);
  --font-size-kn-base: var(--font-size-sa-base);
  --font-size-kn-md: var(--font-size-sa-md);
  --font-size-kn-lg: var(--font-size-sa-lg);
  --font-size-kn-xl: var(--font-size-sa-xl);
  --font-size-kn-2xl: var(--font-size-sa-2xl);
  --font-size-kn-3xl: var(--font-size-sa-3xl);
  --font-size-kn-4xl: var(--font-size-sa-4xl);

  --font-size-en: var(--font-size-en-base);
  --font-size-sa: var(--font-size-sa-base);
  --font-size-kn: var(--font-size-kn-base);

  --line-height-en-4xs: 1.15;
  --line-height-en-3xs: 1.25;
  --line-height-en-2xs: 1.30;
  --line-height-en-xs: 1.40;
  --line-height-en-sm: 1.45;
  --line-height-en-base: 1.50;

  --line-height-sa-4xs: 1.30;
  --line-height-sa-3xs: 1.40;
  --line-height-sa-2xs: 1.50;
  --line-height-sa-xs: 1.55;
  --line-height-sa-sm: 1.60;
  --line-height-sa-base: 1.70;

  --line-height-kn-4xs: var(--line-height-sa-4xs);
  --line-height-kn-3xs: var(--line-height-sa-3xs);
  --line-height-kn-2xs: var(--line-height-sa-2xs);
  --line-height-kn-xs: var(--line-height-sa-xs);
  --line-height-kn-sm: var(--line-height-sa-sm);
  --line-height-kn-base: var(--line-height-sa-base);

  --line-height-en: var(--line-height-en-base);
  --line-height-sa: var(--line-height-sa-base);
  --line-height-kn: var(--line-height-kn-base);

  --size-3xs: 0.1rem;
  --size-2xs: 0.15rem;
  --size-xs:  0.25rem;
  --size-sm:  0.5rem;
  --size-base:0.75rem;
  --size-md:  1rem;
  --size-lg:  1.5rem;
  --size-xl:  2rem;
  --size-2xl: 2.5rem;
  --size-3xl: 3rem;
  --size-4xl: 4rem;

  --border-radius: var(--size-xs);
  --std-ar: 2 / 3;
}

/*--- Base Styles ------------------------------------------------------------*/

:root {
  &[data-font-family-en="hand-written"],
  [data-font-family-en="hand-written"] {
    --font-family-en: var(--font-family-hand-written);
  }

  &[data-font-family-en="monospace"],
  [data-font-family-en="monospace"] {
    --font-family-en: var(--font-family-monospace);
  }

  &[data-font-family-en="sans-serif"],
  [data-font-family-en="sans-serif"] {
    --font-family-en: var(--font-family-sans-serif);
  }

  &[data-font-family-en="serif"],
  [data-font-family-en="serif"] {
    --font-family-en: var(--font-family-serif);
  }

  &[data-font-family-sa="engine"],
  [data-font-family-sa="engine"] {
    --font-family-sa: var(--font-family-devanagari-engine);
  }

  &[data-font-family-sa="heritage-press"],
  [data-font-family-sa="heritage-press"] {
    --font-family-sa: var(--font-family-devanagari-heritage-press);
  }

  &[data-font-family-sa="north-style"],
  [data-font-family-sa="north-style"] {
    --font-family-sa: var(--font-family-devanagari-north-style);
  }

  &[data-font-family-sa="south-style"],
  [data-font-family-sa="south-style"] {
    --font-family-sa: var(--font-family-devanagari-south-style);
  }

  &[data-font-family-kn="engine"],
  [data-font-family-kn="engine"] {
    --font-family-kn: var(--font-family-kannada-engine);
  }

  &[data-font-family-kn="heritage-press"],
  [data-font-family-kn="heritage-press"] {
    --font-family-kn: var(--font-family-kannada-heritage-press);
  }

  &[data-script="original"] rt {
    display: none;
  }
}

/* default color-scheme = light */
:root,
:root[data-theme="light"] {
  --color-surface-deep: var(--catppuccin-latte-crust);
  --color-surface-sunken: var(--catppuccin-latte-mantle);
  --color-surface-base: var(--catppuccin-latte-base);
  --color-surface-raised: var(--catppuccin-latte-surface-0);
  --color-surface-line: var(--catppuccin-latte-surface-1);

  --color-accent-base: var(--catppuccin-latte-text);
  --color-accent-muted: var(--catppuccin-latte-subtext-0);
  --color-accent-brand-1: var(--catppuccin-latte-mauve);
  --color-accent-brand-2: var(--catppuccin-latte-peach);
  --color-accent-brand-3: var(--catppuccin-latte-sapphire);
  --color-accent-info: var(--catppuccin-latte-blue);
  --color-accent-success: var(--catppuccin-latte-green);
  --color-accent-warning: var(--catppuccin-latte-yellow);
  --color-accent-danger: var(--catppuccin-latte-red);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-surface-deep: var(--catppuccin-mocha-crust);
  --color-surface-sunken: var(--catppuccin-mocha-mantle);
  --color-surface-base: var(--catppuccin-mocha-base);
  --color-surface-raised: var(--catppuccin-mocha-surface-0);
  --color-surface-line: var(--catppuccin-mocha-surface-1);

  --color-accent-base: var(--catppuccin-mocha-text);
  --color-accent-muted: var(--catppuccin-mocha-subtext-0);
  --color-accent-brand-1: var(--catppuccin-mocha-mauve);
  --color-accent-brand-2: var(--catppuccin-mocha-peach);
  --color-accent-brand-3: var(--catppuccin-mocha-sapphire);
  --color-accent-info: var(--catppuccin-mocha-blue);
  --color-accent-success: var(--catppuccin-mocha-green);
  --color-accent-warning: var(--catppuccin-mocha-yellow);
  --color-accent-danger: var(--catppuccin-mocha-red);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-surface-deep: var(--catppuccin-mocha-crust);
    --color-surface-sunken: var(--catppuccin-mocha-mantle);
    --color-surface-base: var(--catppuccin-mocha-base);
    --color-surface-raised: var(--catppuccin-mocha-surface-0);
    --color-surface-line: var(--catppuccin-mocha-surface-1);

    --color-accent-base: var(--catppuccin-mocha-text);
    --color-accent-muted: var(--catppuccin-mocha-subtext-0);
    --color-accent-brand-1: var(--catppuccin-mocha-mauve);
    --color-accent-brand-2: var(--catppuccin-mocha-peach);
    --color-accent-brand-3: var(--catppuccin-mocha-sapphire);
    --color-accent-info: var(--catppuccin-mocha-blue);
    --color-accent-success: var(--catppuccin-mocha-green);
    --color-accent-warning: var(--catppuccin-mocha-yellow);
    --color-accent-danger: var(--catppuccin-mocha-red);

    color-scheme: dark;
  }
}

:lang(en) {
  font-family: var(--font-family-en);
  font-size: var(--font-size-en);
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
  line-height: var(--line-height-en);
}

:lang(sa) {
  font-family: var(--font-family-sa);
  font-size: var(--font-size-sa);
  font-variant-ligatures: normal;
  line-height: var(--line-height-sa);
}

:lang(kn) {
  font-family: var(--font-family-kn);
  font-feature-settings: "akhn", "rphf", "pref", "blwf", "pstf", "pres", "blws", "psts", "haln", "calt", "clig", "liga";
  font-size: var(--font-size-kn);
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
  line-height: var(--line-height-kn);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  color: var(--color-accent-info);
  display: inline-block;
  position: relative;
  text-decoration: none;

  &:not(.icon-button)::after {
    background-color: var(--color-accent-info);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: bottom center;
    transition: transform 0.25s ease-out;
    width: 100%;
  }

  &:hover:not(.icon-button) {
    color: var(--color-accent-info);

    &::after {
      transform: scaleX(1);
    }
  }

  &:active:not(.icon-button) {
    color: var(--color-accent-brand-1);

    &::after {
      background-color: var(--color-accent-brand-1);
    }
  }
}

body {
  background: var(--color-surface-base);
  color: var(--color-accent-base);
  font-optical-sizing: auto;
  height: 100dvh;
  overflow: hidden;
  text-rendering: optimizeLegibility;
  width: 100dvw;
}

button {
  color: inherit;
  font: inherit;
}

canvas {
  display: block;
  height: 100%;
  width: 100%;
}

h1 {
  --font-size-en: var(--font-size-en-4xl);
  --font-size-sa: var(--font-size-sa-4xl);
  --font-size-kn: var(--font-size-kn-4xl);
  --line-height-en: var(--line-height-en-4xs);
  --line-height-sa: var(--line-height-sa-4xs);
  --line-height-kn: var(--line-height-kn-4xs);

  margin-block: var(--size-md);
  overflow-wrap: break-word;
}

h2 {
  --font-size-en: var(--font-size-en-3xl);
  --font-size-sa: var(--font-size-sa-3xl);
  --font-size-kn: var(--font-size-kn-3xl);
  --line-height-en: var(--line-height-en-3xs);
  --line-height-sa: var(--line-height-sa-3xs);
  --line-height-kn: var(--line-height-kn-3xs);

  margin-block: var(--size-md);
  overflow-wrap: break-word;
}

h3 {
  --font-size-en: var(--font-size-en-2xl);
  --font-size-sa: var(--font-size-sa-2xl);
  --font-size-kn: var(--font-size-kn-2xl);
  --line-height-en: var(--line-height-en-2xs);
  --line-height-sa: var(--line-height-sa-2xs);
  --line-height-kn: var(--line-height-kn-2xs);

  margin-block: var(--size-md);
  overflow-wrap: break-word;
}

h4 {
  --font-size-en: var(--font-size-en-xl);
  --font-size-sa: var(--font-size-sa-xl);
  --font-size-kn: var(--font-size-kn-xl);
  --line-height-en: var(--line-height-en-xs);
  --line-height-sa: var(--line-height-sa-xs);
  --line-height-kn: var(--line-height-kn-xs);

  margin-block: var(--size-base);
  overflow-wrap: break-word;
}

h5 {
  --font-size-en: var(--font-size-en-lg);
  --font-size-sa: var(--font-size-sa-lg);
  --font-size-kn: var(--font-size-kn-lg);
  --line-height-en: var(--line-height-en-sm);
  --line-height-sa: var(--line-height-sa-sm);
  --line-height-kn: var(--line-height-kn-sm);

  margin-block: var(--size-sm);
  overflow-wrap: break-word;
}

h6 {
  --font-size-en: var(--font-size-en-md);
  --font-size-sa: var(--font-size-sa-md);
  --font-size-kn: var(--font-size-kn-md);

  margin-block: var(--size-sm);
  overflow-wrap: break-word;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-weight: normal;
}

:is(h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

hr {
  background: linear-gradient(to right, transparent 0%, var(--color-surface-line) 20%, var(--color-surface-line) 80%, transparent 100%);
  border: none;
  height: 1px;
  inline-size: 90%;
  margin-block: var(--size-md);
  opacity: 0.7;
}

html {
  color-scheme: light dark;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

input {
  color: inherit;
  font: inherit;
}

ol {
  list-style: none;
}

p {
  overflow-wrap: break-word;
}

picture {
  display: block;
  height: auto;
  max-width: 100%;
}

ruby {
  ruby-align: start;
  ruby-position: over;
  white-space: nowrap;

  > rt {
    --font-size-en: var(--font-size-en-sm);
    --font-size-sa: var(--font-size-sa-sm);
    --font-size-kn: var(--font-size-kn-sm);
    --line-height-en: var(--line-height-en-4xs);
    --line-height-sa: var(--line-height-sa-4xs);
    --line-height-kn: var(--line-height-kn-4xs);

    color: var(--color-accent-muted);
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;

    &:lang(en) {
      margin-block-end: var(--size-sm);
    }
  }
}

select {
  color: inherit;
  font: inherit;
}

svg {
  display: block;
  height: auto;
  max-width: 100%;
}

textarea {
  color: inherit;
  font: inherit;
  resize: vertical;
}

ul {
  list-style: none;
}

video {
  display: block;
  height: auto;
  max-width: 100%;
}

/*--- Modal ------------------------------------------------------------------*/

.modal-backdrop {
  background: color-mix(in srgb, var(--color-surface-deep) 70%, transparent);
  display: none;
  inset: 0;
  position: fixed;
  z-index: 199;

  &[data-is-open="true"] {
    display: grid;
    place-items: center;
  }

  .modal {
    align-items: center;
    background: var(--color-surface-base);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-surface-line);
    display: flex;
    flex-direction: column;
    gap: var(--size-xl);
    inline-size: 22rem;
    max-block-size: 90vh;
    max-inline-size: 90vw;
    overflow-y: auto;
    padding: var(--size-2xl) var(--size-xl);

    .modal-about {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: var(--size-sm);

      > div, > h3 {
        margin-block: 0;
      }

      .modal-about-meta {
        display: flex;
        font-size: var(--font-size-en-xs);
        gap: var(--size-md);
      }
    }

    .modal-settings {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: var(--size-lg);
    }
  }
}

/*--- Modules ----------------------------------------------------------------*/

.icon-button {
  background: transparent;
  border: 0;
  border-radius: var(--border-radius);
  cursor: pointer;
  display: inline-grid;
  padding: var(--size-sm);
  place-items: center;

  &:hover {
    background: var(--color-surface-raised);
  }

  svg {
    block-size: var(--size-lg);
    fill: currentColor;
    inline-size: var(--size-lg);
  }

  &:hover svg {
    fill: var(--color-accent-brand-1);
  }
}

.picker {
  background: var(--color-surface-raised);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-surface-line);
  display: inline-flex;

  button {
    background: transparent;
    border: 0;
    color: var(--color-accent-muted);
    cursor: pointer;
    padding: var(--size-xs) var(--size-sm);
    transition: background 0.15s ease, color 0.15s ease;

    & + button {
      border-inline-start: 1px solid var(--color-surface-line);
    }

    &:hover {
      color: var(--color-accent-brand-1);
    }

    &[data-is-active="true"] {
      background: var(--color-surface-base);
      color: var(--color-accent-base);
    }
  }
}

.scrollable {
  overflow-y: auto;
  scrollbar-color: var(--color-surface-raised) var(--color-surface-base);
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
}