@import 'tailwindcss';

/* Tailwind's scanner can't extract this class from _button.html.erb's nested quoting */
@source inline("animate-spin");

@theme {
  --font-gilroy: 'Gilroy', sans-serif;
  --font-tajawal: 'Tajawal', sans-serif;
  --font-cairo: 'Cairo', sans-serif;
  --font-body: 'Gilroy', 'Tajawal', sans-serif;
  --font-heading: 'Gilroy', 'Cairo', sans-serif;

  /* Brand */
  --color-primary: #005253;
  --color-primary-hover: #0b6e70;
  --color-primary-active: #107879;
  --color-accent: #32b9b4;
  --color-secondary: #3cd278;
  --color-secondary-hover: #70e39e;
  --color-secondary-active: #22a155;

  /* Text */
  --color-foreground: #1a1a1a;
  --color-subtle-foreground: #4a4a4a;
  --color-muted-foreground: #737373;
  --color-disabled: #a8a8a8;

  /* Surfaces & borders */
  --color-muted: #eeeeee;
  --color-divider: #f0f0f0;
  --color-border: #d9d9d9;
  --color-input: #fdfdfd;

  /* Status */
  --color-danger: #f96161;
  --color-danger-hover: #f28787;
  --color-warning: #f59e0b;

  /* Cards */
  --shadow-card: 0px 2px 16px 0px rgba(0, 0, 0, 0.06);
  --color-stacked-bar: #b3b3b3;
}

@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

/* Arabic locale: flip priority so Arabic font comes first */
:lang(ar) {
  --font-body: 'Tajawal', 'Gilroy', sans-serif;
  --font-heading: 'Cairo', 'Gilroy', sans-serif;
}

.field_with_errors {
  @apply w-full;
}

.showcase-shadow {
  box-shadow:
    7.358px 6.02px 21.07px 0px rgba(0, 0, 0, 0.1),
    29.431px 24.414px 38.126px 0px rgba(0, 0, 0, 0.09),
    65.884px 55.182px 51.503px 0px rgba(0, 0, 0, 0.05),
    117.053px 97.99px 61.202px 0px rgba(0, 0, 0, 0.01);
}