@import "tailwindcss";

@property --color-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #fafbfc;
}

@property --color-bg-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #f3f4f6;
}

@property --color-text-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #111827;
}

@property --color-text-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #6b7280;
}

@property --color-border {
  syntax: "<color>";
  inherits: true;
  initial-value: #e5e7eb;
}

:root {
  --color-bg: #fafbfc;
  --color-bg-secondary: #f3f4f6;
  --color-bg-tertiary: #e5e7eb;

  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;

  --color-brand-primary: #4f46e5;
  --color-brand-primary-light: #818cf8;
  --color-brand-primary-dark: #4338ca;

  --color-brand-accent: #06b6d4;
  --color-brand-accent-light: #67e8f9;
  --color-brand-accent-dark: #0891b2;

  --color-border: #e5e7eb;
  --color-border-dark: #d1d5db;

  --color-success: #06b6d4;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #4f46e5;

  --color-success-bg: #ecfeff;
  --color-warning-bg: #fffbeb;
  --color-error-bg: #fef2f2;
  --color-info-bg: #eef2ff;

  --color-amber: #f59e0b;
  --color-danger: #ef4444;

  --color-glass: rgba(255, 255, 255, 0.8);
  --color-glass-dark: rgba(17, 24, 39, 0.8);
  --gradient-card-start: #ffffff;
  --gradient-card-end: #f3f4f6;

  --color-dot-grid: #e5e7eb;

  --color-focus-ring: #4f46e5;
}

@theme {
  --color-bg: #fafbfc;
  --color-bg-secondary: #f3f4f6;
  --color-bg-tertiary: #e5e7eb;

  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;

  --color-brand-primary: #4f46e5;
  --color-brand-primary-light: #818cf8;
  --color-brand-primary-dark: #4338ca;

  --color-brand-accent: #06b6d4;
  --color-brand-accent-light: #67e8f9;
  --color-brand-accent-dark: #0891b2;

  --color-border: #e5e7eb;
  --color-border-dark: #d1d5db;

  --color-success: #06b6d4;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #4f46e5;

  --color-success-bg: #ecfeff;
  --color-warning-bg: #fffbeb;
  --color-error-bg: #fef2f2;
  --color-info-bg: #eef2ff;

  --color-amber: #f59e0b;
  --color-danger: #ef4444;

  --color-glass: rgba(255, 255, 255, 0.8);
  --color-glass-dark: rgba(17, 24, 39, 0.8);
  --gradient-card-start: #ffffff;
  --gradient-card-end: #f3f4f6;
  --color-dot-grid: #e5e7eb;
  --color-focus-ring: #4f46e5;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 32px;
  --spacing-8: 40px;
  --spacing-9: 48px;
  --spacing-10: 56px;
  --spacing-11: 64px;
  --spacing-12: 72px;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111827;
    --color-bg-secondary: #1f2937;
    --color-bg-tertiary: #374151;

    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-tertiary: #9ca3af;

    --color-border: #374151;
    --color-border-dark: #4b5563;

    --color-success-bg: #0c4a6e;
    --color-warning-bg: #78350f;
    --color-error-bg: #7f1d1d;
    --color-info-bg: #1e1b4b;

    --color-glass: rgba(17, 24, 39, 0.8);
    --color-glass-dark: rgba(17, 24, 39, 0.9);
    --gradient-card-start: #1f2937;
    --gradient-card-end: #0b1120;

    --color-dot-grid: #374151;
    --color-focus-ring: #818cf8;
  }

  @theme {
    --color-bg: #111827;
    --color-bg-secondary: #1f2937;
    --color-bg-tertiary: #374151;

    --color-text-primary: #f9fafb;
    --color-text-secondary: #d1d5db;
    --color-text-tertiary: #9ca3af;

    --color-border: #374151;
    --color-border-dark: #4b5563;

    --color-success-bg: #0c4a6e;
    --color-warning-bg: #78350f;
    --color-error-bg: #7f1d1d;
    --color-info-bg: #1e1b4b;

    --color-glass: rgba(17, 24, 39, 0.8);
    --color-glass-dark: rgba(17, 24, 39, 0.9);
    --gradient-card-start: #1f2937;
    --gradient-card-end: #0b1120;
    --color-dot-grid: #374151;
    --color-focus-ring: #818cf8;
  }
}

:root.light {
  --color-bg: #fafbfc;
  --color-bg-secondary: #f3f4f6;
  --color-bg-tertiary: #e5e7eb;

  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;

  --color-border: #e5e7eb;
  --color-border-dark: #d1d5db;

  --color-success-bg: #ecfeff;
  --color-warning-bg: #fffbeb;
  --color-error-bg: #fef2f2;
  --color-info-bg: #eef2ff;

  --color-glass: rgba(255, 255, 255, 0.8);
  --color-glass-dark: rgba(17, 24, 39, 0.8);
  --gradient-card-start: #ffffff;
  --gradient-card-end: #f3f4f6;

  --color-dot-grid: #e5e7eb;
  --color-focus-ring: #4f46e5;
}

:root.dark {
  --color-bg: #111827;
  --color-bg-secondary: #1f2937;
  --color-bg-tertiary: #374151;

  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-tertiary: #9ca3af;

  --color-border: #374151;
  --color-border-dark: #4b5563;

  --color-success-bg: #0c4a6e;
  --color-warning-bg: #78350f;
  --color-error-bg: #7f1d1d;
  --color-info-bg: #1e1b4b;

  --color-glass: rgba(17, 24, 39, 0.8);
  --color-glass-dark: rgba(17, 24, 39, 0.9);
  --gradient-card-start: #1f2937;
  --gradient-card-end: #0b1120;

  --color-dot-grid: #374151;
  --color-focus-ring: #818cf8;
}

:root {
  background-color: var(--color-bg);
  background-image: linear-gradient(90deg, transparent 1.5px),
    radial-gradient(
      circle,
      color-mix(in srgb, var(--color-dot-grid) 80%, transparent) 1px,
      transparent 3px
    );
  background-size:
    54px 100%,
    36px 36px;
  background-position:
    0 0,
    18px 0;
  background-attachment: fixed;
  transition:
    background-color 500ms ease-in-out,
    color 500ms ease-in-out;
}

@layer base {
  html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.5;
    transition:
      background-color 500ms ease-in-out,
      color 500ms ease-in-out;
  }

  *:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .gradient-primary {
    background: linear-gradient(
      135deg,
      var(--color-brand-primary) 0%,
      var(--color-brand-primary-dark) 100%
    );
  }

  .gradient-accent {
    background: linear-gradient(
      135deg,
      var(--color-brand-accent) 0%,
      var(--color-brand-accent-dark) 100%
    );
  }

  .gradient-subtle {
    background: linear-gradient(
      180deg,
      var(--color-bg) 0%,
      var(--color-bg-secondary) 100%
    );
  }

  .gradient-card {
    background: linear-gradient(
      180deg,
      var(--gradient-card-start) 0%,
      var(--gradient-card-end) 100%
    );
  }

  .glass {
    background: var(--color-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .glass-dark {
    background: var(--color-glass-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .text-gradient-primary {
    background: linear-gradient(
      135deg,
      var(--color-brand-primary) 0%,
      var(--color-brand-primary-light) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-accent {
    background: linear-gradient(
      135deg,
      var(--color-brand-accent) 0%,
      var(--color-brand-accent-light) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .shadow-glow-primary {
    box-shadow:
      0 0 0 4px rgba(79, 70, 229, 0.1),
      0 4px 12px rgba(79, 70, 229, 0.15);
  }

  .shadow-glow-accent {
    box-shadow:
      0 0 0 4px rgba(6, 182, 212, 0.1),
      0 4px 12px rgba(6, 182, 212, 0.15);
  }

  .bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
  }

  .bg-dot-grid {
    background-color: var(--color-bg);
    background-image: linear-gradient(90deg, transparent 1.5px),
      radial-gradient(
        circle,
        color-mix(in srgb, var(--color-dot-grid) 80%, transparent) 1px,
        transparent 3px
      );
    background-size:
      54px 100%,
      36px 36px;
    background-position:
      0 0,
      18px 0;
    background-attachment: fixed;
  }
}
