sass-mohfarawati/app/globals.css

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

:root {
  --background: 220 23% 97%;
  --foreground: 222 22% 11%;

  --card: 0 0% 100%;
  --card-foreground: 222 22% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 22% 11%;

  --primary: 10 74% 50%;
  --primary-foreground: 210 40% 98%;
  --secondary: 214 19% 93%;
  --secondary-foreground: 222 22% 11%;
  --muted: 215 20% 92%;
  --muted-foreground: 219 15% 35%;
  --accent: 44 93% 55%;
  --accent-foreground: 222 22% 11%;
  --destructive: 0 72% 45%;
  --destructive-foreground: 210 40% 98%;

  --surface: 0 0% 100%;
  --surface-soft: 215 18% 93%;
  --surface-elevated: 0 0% 99%;
  --border: 215 20% 88%;
  --input: 215 20% 83%;
  --ring: 10 74% 50%;

  --radius: 0.85rem;
  --radius-card: 1rem;
  --radius-input: 0.7rem;
  --radius-sidebar: 1rem;

  --shadow-xs: 0 1px 2px 0 hsl(220 30% 10% / 0.06);
  --shadow-sm: 0 6px 18px -14px hsl(220 32% 20% / 0.18);
  --shadow-md: 0 18px 35px -24px hsl(220 32% 20% / 0.24);
  --shadow-lg: 0 24px 55px -30px hsl(220 32% 20% / 0.3);
  --shadow-card: 0 10px 30px -20px hsl(220 35% 10% / 0.22);
  --shadow-sidebar: inset 0 1px 0 0 hsl(0 0% 100% / 0.08);

  --sidebar-background: 220 27% 96%;
  --sidebar-foreground: 223 18% 24%;
  --sidebar-primary: 10 74% 50%;
  --sidebar-primary-foreground: 210 40% 98%;
  --sidebar-accent: 220 24% 91%;
  --sidebar-accent-foreground: 222 20% 15%;
  --sidebar-border: 216 20% 85%;
  --sidebar-ring: 10 74% 50%;

  --focus-ring: 0 0 0 2px hsl(var(--ring) / 0.35);
}

.dark {
  --background: 223 32% 7%;
  --foreground: 216 36% 93%;

  --card: 221 29% 11%;
  --card-foreground: 216 36% 93%;
  --popover: 221 29% 11%;
  --popover-foreground: 216 36% 93%;

  --primary: 10 80% 56%;
  --primary-foreground: 216 36% 93%;
  --secondary: 221 23% 18%;
  --secondary-foreground: 216 36% 93%;
  --muted: 221 21% 20%;
  --muted-foreground: 218 17% 76%;
  --accent: 44 92% 52%;
  --accent-foreground: 221 29% 11%;
  --destructive: 0 72% 50%;
  --destructive-foreground: 216 36% 93%;

  --surface: 221 29% 11%;
  --surface-soft: 220 24% 15%;
  --surface-elevated: 220 21% 20%;
  --border: 221 21% 24%;
  --input: 221 20% 27%;
  --ring: 10 80% 56%;

  --shadow-xs: 0 1px 2px 0 hsl(220 40% 2% / 0.5);
  --shadow-sm: 0 8px 20px -12px hsl(220 40% 2% / 0.65);
  --shadow-md: 0 18px 36px -20px hsl(220 40% 2% / 0.75);
  --shadow-lg: 0 28px 60px -28px hsl(220 40% 2% / 0.85);
  --shadow-card: 0 16px 34px -24px hsl(220 40% 2% / 0.8);
  --shadow-sidebar: inset 0 1px 0 0 hsl(216 36% 93% / 0.05);

  --sidebar-background: 223 30% 9%;
  --sidebar-foreground: 216 28% 86%;
  --sidebar-primary: 10 80% 56%;
  --sidebar-primary-foreground: 216 36% 93%;
  --sidebar-accent: 221 23% 17%;
  --sidebar-accent-foreground: 216 36% 93%;
  --sidebar-border: 221 20% 21%;
  --sidebar-ring: 10 80% 56%;
}

html {
  color-scheme: light;
  background-color: hsl(var(--background));
}

html.dark {
  color-scheme: dark;
}

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

  body {
    @apply min-h-screen bg-background text-foreground antialiased;
  }
}

body {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

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

@layer utilities {
  .bg-app {
    background-color: hsl(var(--background));
  }

  .bg-surface {
    background-color: hsl(var(--surface));
  }

  .bg-surface-soft {
    background-color: hsl(var(--surface-soft));
  }

  .bg-surface-elevated {
    background-color: hsl(var(--surface-elevated));
  }

  .bg-inverse {
    background-color: hsl(var(--foreground));
  }

  .text-fg {
    color: hsl(var(--foreground));
  }

  .text-muted {
    color: hsl(var(--muted-foreground));
  }

  .text-muted-strong {
    color: hsl(var(--foreground) / 0.86);
  }

  .text-subtle {
    color: hsl(var(--muted-foreground) / 0.88);
  }

  .text-inverse {
    color: hsl(var(--background));
  }

  .border-default {
    border-color: hsl(var(--border));
  }

  .border-strong {
    border-color: hsl(var(--input));
  }

  .status-success {
    background-color: hsl(142 70% 45% / 0.15);
    color: hsl(142 72% 34%);
  }

  .status-warning {
    background-color: hsl(38 92% 56% / 0.17);
    color: hsl(33 92% 34%);
  }

  .status-danger {
    background-color: hsl(var(--destructive) / 0.18);
    color: hsl(var(--destructive));
  }

  .hover-surface-soft:hover {
    background-color: hsl(var(--surface-soft));
  }

  .hover-fg:hover {
    color: hsl(var(--foreground));
  }

  .group:hover .group-hover-fg {
    color: hsl(var(--foreground));
  }

  .group:hover .group-hover-border-strong {
    border-color: hsl(var(--input));
  }

  .btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .btn-primary:hover {
    filter: brightness(0.95);
  }

  .btn-secondary {
    border: 1px solid hsl(var(--input));
    color: hsl(var(--foreground) / 0.88);
    background-color: transparent;
  }

  .btn-secondary:hover {
    background-color: hsl(var(--surface-soft));
  }

  .field-surface {
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--surface));
    color: hsl(var(--foreground));
    border-radius: var(--radius-input);
  }

  .field-surface:focus {
    outline: none;
    box-shadow: var(--focus-ring);
  }


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

  .brand-glow {
    box-shadow:
      0 10px 40px -16px hsl(var(--primary) / 0.45),
      0 8px 32px -18px hsl(var(--accent) / 0.45);
  }

  .float-slow {
    animation: float-slow 9s ease-in-out infinite;
  }

  .float-medium {
    animation: float-medium 7s ease-in-out infinite;
  }
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0px) translateX(0px) scale(1);
  }
  50% {
    transform: translateY(-12px) translateX(10px) scale(1.04);
  }
}

@keyframes float-medium {
  0%,
  100% {
    transform: translateY(0px) translateX(0px) scale(1);
  }
  50% {
    transform: translateY(10px) translateX(-8px) scale(1.03);
  }
}