sass-mohfarawati/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 222 24% 10%;

  --card: 0 0% 100%;
  --card-foreground: 222 24% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 24% 10%;

  --primary: 9 73% 50%;
  --primary-foreground: 210 40% 98%;
  --secondary: 220 14% 96%;
  --secondary-foreground: 222 22% 18%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 10% 42%;
  --accent: 220 14% 96%;
  --accent-foreground: 222 22% 18%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --surface-1: 0 0% 100%;
  --surface-2: 220 16% 97%;
  --surface-3: 220 14% 94%;
  --surface-inverse: 222 24% 12%;
  --surface-inverse-foreground: 210 40% 98%;

  --border: 220 13% 90%;
  --border-strong: 220 11% 82%;
  --input: 220 13% 90%;
  --ring: 9 73% 50%;

  --status-success: 145 63% 42%;
  --status-success-soft: 145 58% 92%;
  --status-warning: 36 92% 44%;
  --status-warning-soft: 41 96% 90%;

  --brand-primary: 9 73% 50%;
  --brand-secondary: 12 64% 58%;
  --hero-base: 260 22% 95%;
  --hero-ink: 226 43% 11%;
  --hero-left: 226 100% 85%;
  --hero-right: 334 33% 91%;
  --hero-bottom: 205 61% 88%;
  --ambient-primary-alpha: 0.06;
  --ambient-secondary-alpha: 0.04;
  --ambient-grid-alpha: 0;

  --radius-surface: 24px;
  --radius-nested: 16px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px hsl(220 26% 18% / 0.05);
  --shadow-sm: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.1);
  --shadow-md: 0 4px 6px -1px hsl(220 26% 18% / 0.1), 0 2px 4px -2px hsl(220 26% 18% / 0.1);
  --shadow-lg: 0 10px 15px -3px hsl(220 26% 18% / 0.12), 0 4px 6px -4px hsl(220 26% 18% / 0.12);
  --shadow-card: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.08);
  --shadow-panel: 0 4px 6px -1px hsl(220 26% 18% / 0.1), 0 2px 4px -2px hsl(220 26% 18% / 0.08);
  --shadow-sidebar: inset 0 1px 0 hsl(0 0% 100% / 0.7);

  --focus-ring: 0 0 0 3px hsl(var(--ring) / 0.18);

  --container-narrow: 48rem;
  --container-default: 72rem;
  --container-wide: 80rem;
  --container-admin: 88rem;
  --header-height: 4.5rem;
  --section-space: 3.5rem;
  --content-space: 1.5rem;

  --sidebar-background: 220 16% 97%;
  --sidebar-foreground: 222 22% 16%;
  --sidebar-primary: 9 73% 50%;
  --sidebar-primary-foreground: 210 40% 98%;
  --sidebar-accent: 220 14% 94%;
  --sidebar-accent-foreground: 222 22% 18%;
  --sidebar-border: 220 12% 86%;
  --sidebar-ring: 9 73% 50%;
}

.dark {
  --background: 222 22% 8%;
  --foreground: 210 20% 96%;

  --card: 222 22% 9%;
  --card-foreground: 210 20% 96%;
  --popover: 222 22% 9%;
  --popover-foreground: 210 20% 96%;

  --primary: 9 78% 56%;
  --primary-foreground: 210 40% 98%;
  --secondary: 222 16% 14%;
  --secondary-foreground: 210 20% 94%;
  --muted: 222 16% 14%;
  --muted-foreground: 217 10% 64%;
  --accent: 222 16% 14%;
  --accent-foreground: 210 20% 94%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;

  --surface-1: 222 22% 9%;
  --surface-2: 222 18% 12%;
  --surface-3: 222 16% 15%;
  --surface-inverse: 210 20% 96%;
  --surface-inverse-foreground: 222 24% 10%;

  --border: 222 14% 18%;
  --border-strong: 222 12% 26%;
  --input: 222 14% 18%;
  --ring: 9 78% 56%;

  --status-success: 145 68% 66%;
  --status-success-soft: 145 36% 18%;
  --status-warning: 42 96% 66%;
  --status-warning-soft: 35 40% 18%;

  --brand-primary: 9 78% 56%;
  --brand-secondary: 12 74% 64%;
  --hero-base: 222 24% 10%;
  --hero-ink: 210 20% 96%;
  --hero-left: 223 45% 24%;
  --hero-right: 293 18% 22%;
  --hero-bottom: 212 35% 20%;
  --ambient-primary-alpha: 0.08;
  --ambient-secondary-alpha: 0.05;
  --ambient-grid-alpha: 0;

  --shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.32);
  --shadow-sm: 0 1px 3px hsl(220 50% 2% / 0.28), 0 1px 2px -1px hsl(220 50% 2% / 0.28);
  --shadow-md: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
  --shadow-lg: 0 10px 15px -3px hsl(220 50% 2% / 0.36), 0 4px 6px -4px hsl(220 50% 2% / 0.36);
  --shadow-card: 0 1px 3px hsl(220 50% 2% / 0.28), 0 1px 2px -1px hsl(220 50% 2% / 0.28);
  --shadow-panel: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
  --shadow-sidebar: inset 0 1px 0 hsl(210 25% 92% / 0.06);

  --sidebar-background: 222 20% 10%;
  --sidebar-foreground: 210 18% 88%;
  --sidebar-primary: 9 78% 56%;
  --sidebar-primary-foreground: 210 40% 98%;
  --sidebar-accent: 222 16% 14%;
  --sidebar-accent-foreground: 210 20% 94%;
  --sidebar-border: 222 14% 20%;
  --sidebar-ring: 9 78% 56%;
}

html {
  color-scheme: light;
  background-color: hsl(var(--background));
  font-family: var(--font-museo), sans-serif;
}

html.dark {
  color-scheme: dark;
}

html[lang="ar"] {
  font-family: var(--font-dubai), sans-serif;
}

.font-latin {
  font-family: var(--font-museo), sans-serif;
}

.font-arabic {
  font-family: var(--font-dubai), sans-serif;
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply min-h-screen text-foreground antialiased;
    background-color: hsl(var(--background));
    background-image: none;
    font-family: inherit;
  }

  a {
    @apply transition-colors;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }
}

::selection {
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--foreground));
}

[data-sonner-toaster][data-x-position="center"] {
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  transform: none;
}

[data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
  width: fit-content;
  min-width: 0;
  max-width: min(calc(100vw - 2rem), 32rem);
  margin-inline: 0;
}

@media (max-width: 600px) {
  [data-sonner-toaster][data-x-position="center"] {
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    transform: none;
  }

  [data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
    width: fit-content;
    max-width: calc(100vw - 2rem);
    margin-inline: 0;
  }

  [data-sonner-toaster][dir="rtl"][data-x-position="center"] {
    left: 0;
    right: 0;
    transform: none;
  }
}

@layer utilities {
  .hero-noise {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
    background-size: 180px 180px;
  }

  .text-balance {
    text-wrap: balance;
  }

  .brand-gradient-text {
    background-image: linear-gradient(
      135deg,
      hsl(var(--brand-primary)),
      hsl(var(--brand-secondary))
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .brand-glow {
    box-shadow:
      0 22px 60px -34px hsl(var(--brand-primary) / 0.38),
      0 18px 44px -32px hsl(var(--brand-secondary) / 0.28);
  }

  .surface-grid {
    background-image:
      linear-gradient(hsl(var(--border) / 0.45) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border) / 0.45) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: center center;
  }

  .surface-ambient {
    background-image:
      radial-gradient(
        circle at top,
        hsl(var(--brand-primary) / calc(var(--ambient-primary-alpha) + 0.04)),
        transparent 36%
      ),
      radial-gradient(
        circle at bottom right,
        hsl(var(--brand-secondary) / calc(var(--ambient-secondary-alpha) + 0.03)),
        transparent 32%
      );
  }

  .hero-surface {
    background: linear-gradient(180deg, hsl(var(--hero-base)), hsl(var(--background)));
  }

  .hero-home {
    color: hsl(var(--hero-ink));
  }

  .hero-page {
    background: linear-gradient(180deg, hsl(var(--hero-base) / 0.96), hsl(var(--background)));
  }

  .hero-sheet {
    isolation: isolate;
  }

  .hero-sheet-base {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 14% 18%, hsl(var(--hero-left) / 0.42), transparent 26%),
      radial-gradient(circle at 84% 14%, hsl(var(--hero-right) / 0.28), transparent 24%),
      radial-gradient(circle at 52% 84%, hsl(var(--hero-bottom) / 0.24), transparent 32%),
      linear-gradient(180deg, hsl(var(--hero-base)), hsl(var(--background)) 88%);
  }

  .hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(110px);
    will-change: transform, opacity;
  }

  .hero-blob-left {
    left: -8%;
    top: 8%;
    height: 24rem;
    width: 24rem;
    background: radial-gradient(circle, hsl(var(--hero-left) / 0.48), transparent 68%);
  }

  .hero-blob-right {
    right: -10%;
    top: 2%;
    height: 22rem;
    width: 22rem;
    background: radial-gradient(circle, hsl(var(--hero-right) / 0.36), transparent 70%);
  }

  .hero-blob-bottom {
    left: 18%;
    bottom: -10%;
    height: 24rem;
    width: 38rem;
    background: radial-gradient(circle, hsl(var(--hero-bottom) / 0.32), transparent 70%);
  }

  .hero-sheet-glow {
    position: absolute;
    inset: -10% -8%;
    background:
      radial-gradient(circle at 18% 24%, hsl(var(--hero-left) / 0.24), transparent 18%),
      radial-gradient(circle at 86% 18%, hsl(var(--hero-right) / 0.16), transparent 18%),
      radial-gradient(circle at 50% 78%, hsl(var(--hero-bottom) / 0.14), transparent 24%);
    filter: blur(36px);
    will-change: transform, opacity;
  }

  .hero-sheet-wave {
    position: absolute;
    inset: -16% -10%;
    background:
      conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg,
        hsl(var(--hero-left) / 0.08) 58deg,
        transparent 120deg,
        transparent 228deg,
        hsl(var(--hero-right) / 0.1) 300deg,
        transparent 360deg
      );
    filter: blur(90px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
  }

  .hero-sheet-noise {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
    background-size: auto, 160px 160px;
    mix-blend-mode: soft-light;
    opacity: 0.22;
    will-change: background-position, opacity, transform;
  }

  .hero-sheet-veil {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025) 44%, rgba(255, 255, 255, 0));
    backdrop-filter: blur(20px) saturate(112%);
    -webkit-backdrop-filter: blur(20px) saturate(112%);
  }

  .hero-sheet-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 7rem;
    background: linear-gradient(180deg, transparent, hsl(var(--background)));
  }

  .hero-title-line {
    display: inline-block;
    padding-inline: 0.02em;
    padding-block-end: 0.05em;
  }

  .hero-title-accent {
    background-image: linear-gradient(
      135deg,
      hsl(var(--primary)) 0%,
      color-mix(in srgb, hsl(var(--primary)) 82%, hsl(var(--foreground))) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .hero-title-accent-soft {
    color: hsl(var(--hero-ink));
  }

  .dark .hero-title-accent {
    background-image: linear-gradient(
      135deg,
      hsl(var(--primary)) 0%,
      color-mix(in srgb, hsl(var(--primary)) 74%, hsl(var(--foreground))) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .dark .hero-title-accent-soft {
    color: hsl(var(--hero-ink));
  }

  .hero-scroll-link {
    display: inline-flex;
    height: 3.25rem;
    width: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border) / 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      0 18px 44px -28px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
      transform 220ms ease,
      border-color 220ms ease,
      background-color 220ms ease;
  }

  .hero-scroll-link:hover {
    transform: translateY(2px);
    border-color: hsl(var(--primary) / 0.42);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.22));
  }

  .hero-scroll-link svg {
    animation: hero-scroll-bob 1.8s ease-in-out infinite;
  }

  .dark .hero-scroll-link {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 18px 44px -28px rgba(0, 0, 0, 0.58);
  }

  .dark .hero-scroll-link:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  }

  @keyframes hero-title-shift {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 45% 100%;
    }
  }

  @keyframes hero-scroll-bob {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(4px);
    }
  }

  .hero-header-bridge {
    position: absolute;
    left: 50%;
    top: 3.5rem;
    height: 11rem;
    width: min(34rem, 72vw);
    transform: translateX(-50%);
    background:
      radial-gradient(circle at 50% 0%, hsl(var(--hero-left) / 0.18), transparent 56%),
      linear-gradient(180deg, hsl(var(--foreground) / 0.06), transparent 72%);
    filter: blur(24px);
    opacity: 0.9;
    pointer-events: none;
  }

  .hero-content-bridge {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    height: 9rem;
    width: min(44rem, 82vw);
    transform: translateX(-50%);
    background:
      radial-gradient(circle at 50% 50%, hsl(var(--hero-bottom) / 0.2), transparent 58%),
      linear-gradient(180deg, transparent, hsl(var(--background) / 0.86));
    filter: blur(20px);
    opacity: 0.92;
    pointer-events: none;
  }

  .retro-led-panel {
    position: relative;
    overflow: hidden;
    --retro-led-dot-size: 0.12rem;
    --retro-led-grid-gap: 0.16rem;
    --retro-led-pad-x: 0.5rem;
    --retro-led-pad-y: 0.36rem;
    width: calc(
      var(--retro-led-visible-columns) * var(--retro-led-dot-size) +
        (var(--retro-led-visible-columns) - 1) * var(--retro-led-grid-gap) + 2 * var(--retro-led-pad-x)
    );
    max-width: 100%;
    border-radius: 0.75rem;
    padding: var(--retro-led-pad-y) var(--retro-led-pad-x);
    background: linear-gradient(180deg, hsl(228 38% 7%), hsl(232 42% 5%));
  }

  .retro-led-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: calc(
      var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
        (var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
    );
  }

  .retro-led-background {
    position: absolute;
    inset: var(--retro-led-pad-y) var(--retro-led-pad-x);
    display: grid;
    grid-template-columns: repeat(var(--retro-led-visible-columns), var(--retro-led-dot-size));
    grid-template-rows: repeat(var(--retro-led-visible-rows), var(--retro-led-dot-size));
    gap: var(--retro-led-grid-gap);
  }

  .retro-led-track {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: flex;
    width: max-content;
    align-items: center;
    animation: retro-led-marquee 16s linear infinite;
    will-change: transform;
  }

  .retro-led-message {
    flex: none;
    display: grid;
    grid-template-columns: repeat(var(--retro-led-message-columns), var(--retro-led-dot-size));
    grid-template-rows: repeat(var(--retro-led-visible-rows), var(--retro-led-dot-size));
    column-gap: var(--retro-led-grid-gap);
    row-gap: var(--retro-led-grid-gap);
    width: calc(
      var(--retro-led-message-columns) * var(--retro-led-dot-size) +
        (var(--retro-led-message-columns) - 1) * var(--retro-led-grid-gap)
    );
    height: calc(
      var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
        (var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
    );
  }

  .retro-led-dot {
    height: var(--retro-led-dot-size);
    width: var(--retro-led-dot-size);
    border-radius: 9999px;
  }

  .retro-led-background-dot {
    background-color: hsl(228 18% 22%);
  }

  .retro-led-active-dot,
  .retro-led-dot.is-lit {
    background-color: hsl(var(--primary));
  }

  .retro-led-spacer {
    flex: none;
    width: calc(
      var(--retro-led-repeat-gap-columns) * var(--retro-led-dot-size) +
        (var(--retro-led-repeat-gap-columns) - 1) * var(--retro-led-grid-gap)
    );
    height: calc(
      var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
        (var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
    );
  }

  .dark .retro-led-panel {
    background: linear-gradient(180deg, hsl(228 38% 7%), hsl(232 42% 5%));
  }

  @keyframes retro-led-marquee {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(
        calc(
          -1 * (
            var(--retro-led-message-columns) * var(--retro-led-dot-size) +
              (var(--retro-led-message-columns) - 1) * var(--retro-led-grid-gap) +
              var(--retro-led-repeat-gap-columns) * var(--retro-led-dot-size) +
              (var(--retro-led-repeat-gap-columns) - 1) * var(--retro-led-grid-gap)
          )
        ),
        0,
        0
      );
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .retro-led-track {
      animation: none;
      transform: translate3d(0, 0, 0);
    }
  }

  @media (max-width: 640px) {
    .retro-led-panel {
      --retro-led-dot-size: 0.11rem;
      --retro-led-grid-gap: 0.12rem;
      --retro-led-pad-x: 0.42rem;
      --retro-led-pad-y: 0.3rem;
    }
  }
}

@media (min-width: 640px) {
  .hero-blob-left {
    height: 30rem;
    width: 30rem;
  }

  .hero-blob-right {
    height: 28rem;
    width: 28rem;
  }

  .hero-blob-bottom {
    height: 28rem;
    width: 44rem;
  }
}

@media (min-width: 1024px) {
  .hero-blob-left {
    left: -4%;
    top: 10%;
    height: 36rem;
    width: 36rem;
  }

  .hero-blob-right {
    right: -4%;
    top: 0;
    height: 34rem;
    width: 34rem;
  }

  .hero-blob-bottom {
    left: 14%;
    bottom: -16%;
    height: 32rem;
    width: 52rem;
  }
}