sass-mohfarawati/app/globals.css

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

:root {
  --color-bg: #f5f6f8;
  --color-fg: #111214;
  --color-surface: #ffffff;
  --color-surface-soft: #eef0f3;
  --color-surface-elevated: #fdfdfd;

  --color-border: #dde1e7;
  --color-border-strong: #bec5d0;

  --color-muted: #4b5565;
  --color-muted-strong: #374151;
  --color-subtle: #6b7380;

  --color-inverse-bg: #111214;
  --color-inverse-fg: #f3f4f6;

  --color-brand-primary: #dd4124;
  --color-brand-secondary: #f7b91f;

  --color-success-bg: #dcfce7;
  --color-success-fg: #166534;
  --color-warning-bg: #fef3c7;
  --color-warning-fg: #92400e;
  --color-danger-bg: #fee2e2;
  --color-danger-fg: #991b1b;
}

.dark {
  --color-bg: #090b0f;
  --color-fg: #eef1f7;
  --color-surface: #10141c;
  --color-surface-soft: #151b24;
  --color-surface-elevated: #1b2230;

  --color-border: #2a3342;
  --color-border-strong: #3a465a;

  --color-muted: #c6cfdd;
  --color-muted-strong: #dbe4f3;
  --color-subtle: #98a4b8;

  --color-inverse-bg: #eff3f9;
  --color-inverse-fg: #0e1118;

  --color-success-bg: rgba(22, 101, 52, 0.35);
  --color-success-fg: #86efac;
  --color-warning-bg: rgba(146, 64, 14, 0.35);
  --color-warning-fg: #fde68a;
  --color-danger-bg: rgba(153, 27, 27, 0.35);
  --color-danger-fg: #fecaca;
}

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

html.dark {
  color-scheme: dark;
}

body {
  min-height: 100vh;
  color: var(--color-fg);
  background: var(--color-bg);
}

::selection {
  background: color-mix(in oklab, var(--color-brand-primary) 72%, black 0%);
  color: #ffffff;
}

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

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

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

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

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

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

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

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

  .text-subtle {
    color: var(--color-subtle);
  }

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

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

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

  .status-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-fg);
  }

  .status-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-fg);
  }

  .status-danger {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-fg);
  }

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

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

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

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

  .btn-primary {
    background-color: var(--color-inverse-bg);
    color: var(--color-inverse-fg);
  }

  .btn-primary:hover {
    opacity: 0.9;
  }

  .btn-secondary {
    border: 1px solid var(--color-border-strong);
    color: var(--color-muted-strong);
    background-color: transparent;
  }

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

  .field-surface {
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface);
    color: var(--color-fg);
  }

  .field-surface:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
  }


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

  .brand-glow {
    box-shadow:
      0 10px 40px -16px color-mix(in oklab, var(--color-brand-primary) 52%, transparent),
      0 8px 32px -18px color-mix(in oklab, var(--color-brand-secondary) 58%, transparent);
  }

  .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);
  }
}