sass-mohfarawati/app/globals.css

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

:root {
  --background: 210 20% 98%;
  --foreground: 222 30% 12%;

  --card: 0 0% 100%;
  --card-foreground: 222 30% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 30% 12%;

  --primary: 214 84% 42%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 24% 94%;
  --secondary-foreground: 222 30% 12%;
  --muted: 210 20% 95%;
  --muted-foreground: 215 16% 38%;
  --accent: 191 78% 42%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 72% 47%;
  --destructive-foreground: 210 40% 98%;

  --surface-1: 0 0% 100%;
  --surface-2: 210 20% 96%;
  --surface-3: 210 24% 93%;
  --surface-inverse: 222 34% 14%;
  --surface-inverse-foreground: 210 40% 98%;

  --border: 214 22% 88%;
  --border-strong: 214 20% 80%;
  --input: 214 20% 84%;
  --ring: 214 84% 42%;

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

  --brand-primary: 214 84% 42%;
  --brand-secondary: 191 78% 42%;
  --ambient-primary-alpha: 0.18;
  --ambient-secondary-alpha: 0.14;
  --ambient-grid-alpha: 0.4;

  --radius-surface: 0rem;
  --radius-nested: 0rem;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px hsl(220 26% 18% / 0.05);
  --shadow-sm: 0 12px 30px -20px hsl(220 32% 18% / 0.16);
  --shadow-md: 0 22px 48px -28px hsl(220 32% 18% / 0.2);
  --shadow-lg: 0 28px 70px -34px hsl(220 32% 18% / 0.28);
  --shadow-card: 0 20px 46px -30px hsl(220 32% 18% / 0.2);
  --shadow-panel: 0 18px 50px -32px hsl(220 32% 18% / 0.18);
  --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: 210 22% 95%;
  --sidebar-foreground: 222 24% 18%;
  --sidebar-primary: 214 84% 42%;
  --sidebar-primary-foreground: 210 40% 98%;
  --sidebar-accent: 210 20% 90%;
  --sidebar-accent-foreground: 222 24% 18%;
  --sidebar-border: 214 20% 84%;
  --sidebar-ring: 214 84% 42%;
}

.dark {
  --background: 222 33% 8%;
  --foreground: 210 25% 92%;

  --card: 222 28% 11%;
  --card-foreground: 210 25% 92%;
  --popover: 222 28% 11%;
  --popover-foreground: 210 25% 92%;

  --primary: 205 88% 64%;
  --primary-foreground: 222 33% 8%;
  --secondary: 222 18% 18%;
  --secondary-foreground: 210 25% 92%;
  --muted: 222 18% 16%;
  --muted-foreground: 215 16% 72%;
  --accent: 190 76% 57%;
  --accent-foreground: 222 33% 8%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 210 40% 98%;

  --surface-1: 222 28% 11%;
  --surface-2: 222 22% 14%;
  --surface-3: 222 18% 17%;
  --surface-inverse: 210 40% 98%;
  --surface-inverse-foreground: 222 33% 8%;

  --border: 221 18% 21%;
  --border-strong: 221 18% 28%;
  --input: 221 18% 26%;
  --ring: 205 88% 64%;

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

  --brand-primary: 205 88% 64%;
  --brand-secondary: 190 76% 57%;
  --ambient-primary-alpha: 0.22;
  --ambient-secondary-alpha: 0.18;
  --ambient-grid-alpha: 0.32;

  --shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.42);
  --shadow-sm: 0 14px 30px -20px hsl(220 50% 2% / 0.48);
  --shadow-md: 0 24px 48px -28px hsl(220 50% 2% / 0.58);
  --shadow-lg: 0 34px 78px -34px hsl(220 50% 2% / 0.72);
  --shadow-card: 0 20px 52px -28px hsl(220 50% 2% / 0.55);
  --shadow-panel: 0 22px 56px -32px hsl(220 50% 2% / 0.52);
  --shadow-sidebar: inset 0 1px 0 hsl(210 25% 92% / 0.06);

  --sidebar-background: 222 25% 10%;
  --sidebar-foreground: 210 18% 86%;
  --sidebar-primary: 205 88% 64%;
  --sidebar-primary-foreground: 222 33% 8%;
  --sidebar-accent: 221 18% 18%;
  --sidebar-accent-foreground: 210 25% 92%;
  --sidebar-border: 221 18% 22%;
  --sidebar-ring: 205 88% 64%;
}

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

html.dark {
  color-scheme: dark;
}

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

  body {
    @apply min-h-screen text-foreground antialiased;
    background-color: hsl(var(--background));
    background-image:
      radial-gradient(
        circle at top,
        hsl(var(--brand-primary) / var(--ambient-primary-alpha)),
        transparent 34%
      ),
      radial-gradient(
        circle at bottom right,
        hsl(var(--brand-secondary) / var(--ambient-secondary-alpha)),
        transparent 30%
      ),
      linear-gradient(hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border) / var(--ambient-grid-alpha)) 1px, transparent 1px);
    background-size: auto, auto, 24px 24px, 24px 24px;
    background-position: center top, right bottom, center center, center center;
    background-attachment: fixed;
  }

  a {
    @apply transition-colors;
  }
}

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

@layer utilities {
  .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%
      );
  }
}