:root {
  color-scheme: light only;

  /* SALLY COVER brand palette (static, light only) */
  --sc-beige: #D8C3A5;
  --sc-cream: #F5F0E8;
  --sc-sand: #C9B69C;
  --sc-brown: #554538;
  --sc-olive: #7C8060;
  --sc-white: #FFFFFF;
  --sc-charcoal: #292929;

  --color-background: #FBF8F3;
  --color-on-background: var(--sc-charcoal);

  --color-primary: var(--sc-brown);
  --color-on-primary: #FFFFFF;
  --color-primary-container: var(--sc-cream);
  --color-on-primary-container: var(--sc-brown);

  --color-error: #A3362B;
  --color-on-error: #ffffff;
  --color-error-container: #F6DED9;
  --color-on-error-container: #5C1810;

  --color-info: var(--sc-brown);
  --color-on-info: #ffffff;
  --color-info-container: var(--sc-cream);
  --color-on-info-container: var(--sc-brown);

  --color-success: #5E6448;
  --color-on-success: #ffffff;
  --color-success-container: #E7E9DC;
  --color-on-success-container: #2F3322;

  --color-outline: #9C8D7C;
  --color-outline-variant: #E4D9C9;

  --color-surface: #FBF8F3;
  --color-on-surface: var(--sc-charcoal);
  --color-surface-variant: #EFE7DB;
  --color-on-surface-variant: #6B5D50;

  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: var(--sc-cream);
  --color-surface-container: #EFE7DB;
  --color-surface-container-high: #E9DFD0;
  --color-surface-container-highest: #E2D5C2;

  --color-overlay: rgba(41, 41, 41, 0.35);

  --font-heading: "Noto Kufi Arabic", var(--font-family);
  --sc-max: 1240px;
  --sc-gutter: 16px;

  --color-star: rgb(250 165 72);

  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-lg-inc: 20px;
  --radius-xl: 28px;
  --radius-xl-inc: 32px;
  --radius-xxl: 48px;
  --radius-rounded: 999px;
  --radius-circled: 50%;

  --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.15);
  --shadow-3: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-4: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px rgba(0, 0, 0, 0.15);
  --shadow-5: 0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px rgba(0, 0, 0, 0.15);

  --font-display-lg: 400 57px/64px var(--font-family);
  --font-display-md: 400 45px/52px var(--font-family);
  --font-display-sm: 400 36px/44px var(--font-family);

  --font-headline-lg: 400 32px/40px var(--font-family);
  --font-headline-md: 400 28px/36px var(--font-family);
  --font-headline-sm: 400 24px/32px var(--font-family);

  --font-title-lg: 400 22px/28px var(--font-family);
  --font-title-md: 500 16px/24px var(--font-family);
  --font-title-sm: 500 14px/20px var(--font-family);

  --font-body-lg: 400 16px/24px var(--font-family);
  --font-body-md: 400 14px/20px var(--font-family);
  --font-body-sm: 400 12px/16px var(--font-family);

  --font-label-lg: 400 14px/20px var(--font-family);
  --font-label-md: 400 12px/16px var(--font-family);
  --font-label-sm: 500 11px/16px var(--font-family);

  --transition-expressive-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.9);
  --transition-expressive-default-spatial: 500ms cubic-bezier(0.38, 1.21, 0.22, 1);
  --transition-expressive-slow-spatial: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);

  --transition-expressive-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);
  --transition-expressive-default-effects: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
  --transition-expressive-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1);

  --transition-standard-fast-spatial: 350ms cubic-bezier(0.27, 1.06, 0.18, 1);
  --transition-standard-default-spatial: 500ms cubic-bezier(0.27, 1.06, 0.18, 1);
  --transition-standard-slow-spatial: 750ms cubic-bezier(0.27, 1.06, 0.18, 1);

  --transition-standard-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);
  --transition-standard-default-effects: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
  --transition-standard-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1);

  --ripple-circle: radial-gradient(circle, color-mix(in srgb, currentColor 12%, transparent) 40%, transparent 41%);
  --ripple-full: radial-gradient(circle, color-mix(in srgb, currentColor 12%, transparent) 100%, transparent 41%);
}

@keyframes spin {
  100% {
    rotate: 360deg;
  }
}

/* Icon */
[ui-icon] {
  flex-shrink: 0;
  overflow: hidden;
  width: var(--icon-size);
  height: var(--icon-size);
  font-size: var(--icon-size) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;

  &[filled] {
    font-variation-settings:
      "FILL" 1,
      "wght" 400,
      "GRAD" 0,
      "opsz" 24;
  }

  &[flip-in-rtl]:dir(rtl) {
    rotate: 180deg;
  }
}

/* Button */
[ui-button] {
  border: none;
  cursor: pointer;
  text-decoration: none;
  outline-offset: 1px;
  outline: 2px solid transparent;
  font: var(--font-body-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  justify-content: center;
  transition: var(--transition-standard-default-effects);

  &[data-variant="primary"] {
    color: var(--color-on-primary);
    background-color: var(--color-primary);

    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--color-primary), currentColor 8%);
    }
  }

  &[data-variant="secondary"] {
    color: var(--color-on-background);
    background-color: var(--color-surface-container-low);

    &:hover:not(:disabled) {
      background-color: var(--color-surface-container-highest);
    }
  }

  &[data-variant="tertiary"] {
    color: var(--color-on-background);
    background-color: var(--color-surface-container-high);

    &:hover:not(:disabled) {
      background-color: var(--color-surface-container-highest);
    }
  }

  &[data-variant="ghost"] {
    color: var(--color-on-background);
    background-color: transparent;

    &:hover:not(:disabled) {
      background-color: var(--color-surface-container-highest);
    }
  }

  &[data-size="lg"] {
    height: 56px;
    gap: var(--spacing-12);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing-24) - var(--spacing-2));

    &[as-icon] {
      width: 56px;
    }
  }

  &[data-size="md"] {
    height: 44px;
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing-16);

    &[as-icon] {
      width: 44px;

      [ui-icon] {
        --icon-size: 24px !important;
      }
    }
  }

  &[data-size="sm"] {
    height: 32px;
    border-radius: var(--radius-sm);
    padding-inline: var(--spacing-12);

    &[as-icon] {
      width: 32px;

      [ui-icon] {
        --icon-size: 20px !important;
      }
    }
  }

  &[data-size="xs"] {
    width: 24px;
    border-radius: var(--radius-xs);
    padding-inline: var(--spacing-4);

    &[as-icon] {
      height: 24px;

      [ui-icon] {
        --icon-size: 18px !important;
      }
    }
  }

  &[data-size="xxs"] {
    width: 16px;
    border-radius: var(--radius-xs);
    padding-inline: var(--spacing-4);

    &[as-icon] {
      height: 16px;

      [ui-icon] {
        --icon-size: 16px !important;
      }
    }
  }

  &:active:not(:disabled) {
    scale: 0.98;

    &[as-icon] {
      scale: 0.95;
    }
  }

  &[data-disabled] {
    pointer-events: none;
  }

  &[data-loading] {
    overflow: hidden;
    position: relative;
    pointer-events: none;

    &::before {
      content: "" !important;
      inset: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      background-color: var(--color-surface-container);
    }

    &::after {
      content: "";
      width: 12px;
      height: 12px;
      position: absolute;
      border-radius: var(--radius-rounded);
      border: 1.5px solid var(--color-outline);
      border-block-end-color: transparent;
      animation: spin 1s linear infinite;
    }
  }

  &:disabled,
  &[data-disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:focus-visible {
    outline-color: var(--color-on-background);
  }
}

/* Link */
[ui-link] {
  position: relative;
  text-decoration: none;
  outline-offset: 1px;
  outline: 2px solid transparent;

  &:not(:has(img))::before {
    content: "";
    width: 0%;
    height: 1px;
    position: absolute;
    inset-block-end: -1px;
    background-color: var(--color-on-background);
    transition: var(--transition-expressive-default-spatial);
  }

  &:hover::before {
    width: 100%;
  }

  &[ui-link="secondary"] {
    &::before {
      width: 100%;
    }

    &:hover::before {
      width: 25%;
    }
  }

  &:focus-visible {
    outline-color: var(--color-on-background);
  }
}

/* Theme */
ui-theme {
  display: flex;

  & > input {
    width: 30px;
    height: 20px;
    cursor: pointer;
    appearance: none;
    position: relative;
    padding: var(--spacing-6);
    border-radius: var(--radius-rounded);
    background-color: var(--color-surface-container);
    transition: var(--transition-standard-default-effects);
    outline-offset: 1px;
    outline: 2px solid transparent;

    &::before {
      content: "";
      width: 8px;
      height: 8px;
      position: absolute;
      clip-path: circle();
      inset-inline-start: var(--spacing-6);
      background-color: var(--color-on-background);
      transition: var(--transition-expressive-fast-spatial);
    }

    &:hover:not(:active) {
      background-color: var(--color-surface-container-highest);
    }

    &:checked::before {
      inset-inline-start: calc(100% - 14px);
    }

    &:focus-visible {
      outline-color: var(--color-on-background);
    }
  }
}

/* Loader */
[ui-loader] {
  inset: 0;
  z-index: 100;
  position: fixed;
  overflow: hidden;
  background-color: var(--color-background);
  transition: var(--transition-expressive-default-spatial);

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    transform: translateX(-100%);
    backdrop-filter: blur(10px);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-on-background) 8%, transparent), transparent);
    animation: skeleton-loading 1s infinite;
  }
}

@keyframes skeleton-loading {
  100% {
    transform: translateX(100%);
  }
}

/* Empty */
[ui-empty] {
  text-align: center;
  padding: var(--spacing-64);

  span {
    opacity: 0.8;
  }
}

/* Hidden */
[hidden] {
  display: none !important;
}

/* Skip to main content */
[ui-skip-to-content] {
  left: 50%;
  opacity: 0;
  z-index: 1000;
  position: fixed;
  padding: 16px 24px;
  transform: translateX(-50%);
  inset-block-start: -64px;
  border-radius: var(--radius-md);
  color: var(--color-on-background);
  background-color: var(--color-surface-container);
  transition: var(--transition-expressive-default-spatial);
  outline: none;
  border: 1px solid transparent;

  &:focus-visible {
    opacity: 1;
    inset-block-start: var(--spacing-12);
    border-color: var(--color-surface-container-highest);
  }
}



/* Announcement Bar */
[layout="announcement-bar"] {
  display: flex;
  justify-content: center;
  padding-block: var(--spacing-10);
  border-radius: var(--radius-md);
  width: calc(100vw - var(--spacing-24));

  .marquee-container {
    width: 50%;
    overflow: hidden;
    position: relative;

    &::before,
    &::after {
      content: "";
      z-index: 2;
      width: 10%;
      height: 100%;
      position: absolute;
    }

    &::after {
      inset-block-end: 0;
      inset-inline-end: 0;
    }

    &:dir(rtl) {
      &::before,
      &::after {
        rotate: 180deg;
      }
    }

    .marquee {
      --scroll-direction: -50%;

      display: flex;
      width: fit-content;
      animation: scroll-start 15s linear infinite;

      &:dir(rtl) {
        --scroll-direction: 50%;
      }
    }

    .bar-wrapper {
      display: flex;

      li {
        white-space: nowrap;
        padding-inline: var(--spacing-16);
      }
    }
  }

  /* Theme */
  &[theme="primary-low"] {
    color: light-dark(var(--color-on-primary-container), var(--color-on-primary));
    background-color: light-dark(var(--color-primary-container), var(--color-primary));

    .marquee-container {
      &::after,
      &::before {
        background: linear-gradient(to right, light-dark(var(--color-primary-container), var(--color-primary)), transparent);
      }

      &::after {
        background: linear-gradient(to left, light-dark(var(--color-primary-container), var(--color-primary)), transparent);
      }
    }
  }

  &[theme="primary-high"] {
    color: light-dark(var(--color-on-primary), var(--color-on-primary-container));
    background-color: light-dark(var(--color-primary), var(--color-primary-container));

    .marquee-container {
      &::after,
      &::before {
        background: linear-gradient(to right, light-dark(var(--color-primary), var(--color-primary-container)), transparent);
      }

      &::after {
        background: linear-gradient(to left, light-dark(var(--color-primary), var(--color-primary-container)), transparent);
      }
    }
  }

  &[theme="neutral"] {
    color: var(--color-background);
    background-color: var(--color-on-background);

    .marquee-container {
      &::after,
      &::before {
        background: linear-gradient(to right, var(--color-on-background), transparent);
      }

      &::after {
        background: linear-gradient(to left, var(--color-on-background), transparent);
      }
    }
  }
}

@keyframes scroll-start {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--scroll-direction));
  }
}

/* Header */
[layout="header"] {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-16);

  .links {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);

    .link {
      a {
        display: flex;
        align-items: center;
        gap: var(--spacing-6);
        font: var(--font-body-md);
        color: var(--color-on-background);

        img {
          object-fit: cover;
        }
      }

      &:first-child {
        text-transform: uppercase;

        a {
          font-weight: bold;
        }
      }
    }
  }

  .actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);

    .action {
      border: none;
      cursor: pointer;
      background-color: transparent;
      color: var(--color-on-background);
      display: flex;
      align-items: center;
      outline-offset: 1px;
      outline: 2px solid transparent;

      &:focus-visible {
        outline-color: var(--color-on-background);
      }
    }

    & > li:last-child {
      display: none;
    }
  }

  &[data-sticky] {
    border-end-end-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    background-color: var(--color-background);
  }
}

#youcan-section--header:has([layout="header"][data-sticky]) {
  z-index: 50;
  position: sticky;
  inset-block-start: var(--spacing-0);
}

/* Footer */
[layout="footer"] {
  margin-block-start: var(--spacing-12);

  display: flex;
  gap: var(--spacing-24);
  justify-content: space-between;
  padding: var(--spacing-64);
  border-radius: var(--radius-md);

  .general {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .store {
      display: grid;
      gap: var(--spacing-16);

      .logo {
        color: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: var(--spacing-6);
        font-weight: bold;
        text-transform: uppercase;

        img {
          object-fit: cover;
        }
      }

      .bio {
        opacity: 0.8;
        text-wrap: balance;
      }
    }

    .copyright {
      a {
        color: inherit;
      }
    }
  }

  .links {
    display: flex;
    gap: var(--spacing-48);
    margin-block-end: var(--spacing-24);

    .links-box {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-24);

      span {
        font: var(--font-body-lg);
      }

      ul {
        display: grid;
        gap: var(--spacing-16);

        li {
          text-transform: capitalize;

          a {
            opacity: 0.8;
            color: inherit;
          }
        }
      }
    }
  }

  /* Theme */
  &[theme="primary-low"] {
    color: light-dark(var(--color-on-primary-container), var(--color-on-primary));
    background-color: light-dark(var(--color-primary-container), var(--color-primary));

    .links {
      .links-box {
        ul {
          li {
            a::before {
              background-color: light-dark(var(--color-on-primary-container), var(--color-on-primary));
            }
          }
        }
      }
    }
  }

  &[theme="primary-high"] {
    color: light-dark(var(--color-on-primary), var(--color-on-primary-container));
    background-color: light-dark(var(--color-primary), var(--color-primary-container));

    .links {
      .links-box {
        ul {
          li {
            a::before {
              background-color: light-dark(var(--color-on-primary), var(--color-on-primary-container));
            }
          }
        }
      }
    }
  }

  &[theme="neutral"] {
    color: var(--color-background);
    background-color: var(--color-on-background);

    .links {
      .links-box {
        ul {
          li {
            a::before {
              background-color: var(--color-background);
            }
          }
        }
      }
    }
  }
}

/* Responsive */
@media (max-width: 1280px) {
  [layout="footer"] {
    flex-direction: column-reverse;

    .general {
      gap: var(--spacing-24);
    }

    .links {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

@media (max-width: 769px) {
  [layout="announcement-bar"] {
    .marquee-container {
      width: 100%;
    }
  }

  [layout="header"] {
    .links {
      li {
        &:not(:first-child) {
          display: none;
        }
      }
    }

    .actions {
      & > li:last-child {
        display: flex;
      }
    }
  }

  [layout="footer"] {
    gap: var(--spacing-48);
    padding: var(--spacing-48);

    .general {
      gap: var(--spacing-48);
    }

    .links {
      margin: 0;
      grid-template-columns: 1fr;
    }
  }
}


ui-toast {
  left: 50%;
  z-index: 9999;
  position: fixed;
  transform: translateX(-50%);
  inset-block-end: var(--spacing-12);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-container);
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-6);
  padding-inline-start: var(--spacing-12);
  min-width: 300px;
  max-width: calc(100vw - var(--spacing-24));
  transition: var(--transition-expressive-default-spatial);

  & > hr {
    width: 1px;
    height: 16px;
    border: none;
    opacity: 0.3;
    background-color: currentColor;
  }

  [ui-toast-status] {
    width: 20px;
    height: 20px;
    clip-path: circle();

    &[ui-toast-status="success"] {
      background: linear-gradient(135deg, var(--color-success), var(--color-success-container));
    }

    &[ui-toast-status="error"] {
      background: linear-gradient(135deg, var(--color-error), var(--color-error-container));
    }

    &[ui-toast-status="info"] {
      background: linear-gradient(135deg, var(--color-info), var(--color-info-container));
    }

    &[ui-toast-status="warning"] {
      background: linear-gradient(135deg, var(--color-star), var(--color-surface-container-highest));
    }
  }

  [ui-toast-message] {
    flex: 2;
    overflow: hidden;
    width: max-content;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &[data-state="closed"] {
    opacity: 0;
    visibility: hidden;
    inset-block-end: -5%;
  }
}

/* Responsive */
@media (max-width: 769px) {
  ui-toast {
    width: calc(100vw - var(--spacing-24));
  }
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family);
}

html {
  scroll-behavior: smooth;
}

body {
  font: var(--font-body-md);
  color: var(--color-on-background);
  background-color: var(--color-background);
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--spacing-12);

  & > [layout="main"],
  & > #youcan-section--header,
  & > #youcan-section--footer {
    width: 100%;
  }

  & > [layout="main"] {
    flex: 2;
    display: flex;
    gap: var(--spacing-12);
    flex-direction: column;
  }

  &[data-theme-mode="dark"],
  &:has(ui-theme > input:checked) {
    color-scheme: dark;

    [data-invert] {
      filter: invert(1);
    }
  }
}

ul {
  list-style: none;
}

.section-head {
  text-align: center;
  padding: var(--spacing-16);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-container-low);

  h2 {
    font: var(--font-title-md);
  }
}