@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

/* @custom-variant dark (&:is(.dark *)); */

@theme inline {
  --color-primary-blue: var(--primary-blue);
  --color-primary-sky-blue: var(--primary-sky-blue);
  --color-primary-amber: var(--primary-amber);
  --color-main-text: var(--main-text);
  --color-secondary-text: var(--secondary-text);
  --color-success: var(--success);
  --color-success-light: var(--success-light);
  --color-mistake: var(--mistake);
  --color-mistake-light: var(--mistake-light);
  --color-warning: var(--warning);
  --color-warning-light: var(--warning-light);
  --color-information: var(--information);
  --color-information-light: var(--information-light);
  --color-status-under-review: var(--status-under-review);
  --color-status-under-review-light: var(--status-under-review-light);
  --color-status-confirm: var(--status-confirm);
  --color-status-confirm-light: var(--status-confirm-light);
  --color-status-in-the-way: var(--status-in-the-way);
  --color-status-in-the-way-light: var(--status-in-the-way-light);
  --color-status-service-started: var(--status-service-started);
  --color-status-service-started-light: var(--status-service-started-light);
  --color-status-completed: var(--status-completed);
  --color-status-completed-light: var(--status-completed-light);
  --color-status-cancelled: var(--status-cancelled);
  --color-status-cancelled-light: var(--status-cancelled-light);
  --color-status-under-dispute: var(--status-under-dispute);
  --color-status-under-dispute-light: var(--status-under-dispute-light);
  --color-status-closed: var(--status-closed);
  --color-status-closed-light: var(--status-closed-light);
  --color-background: var(--background);
  --color-body-background: var(--body-background-color);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-arabic: var(--font-arabic);
  --font-numeric: var(--font-numeric);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  /* Main colors */
  --primary-blue: #00579a;
  --primary-sky-blue: #48b5ed;
  --primary-amber: #f4a300;

  --body-background-color: #f7fbfe;

  /* Core surface colors */
  --background: #eaf7fe;
  --foreground: #102a43;
  --surface: #ffffff;
  --main-text: #102a43;
  --secondary-text: #6b7c8f;
  --border: #bfe3f7;

  /* Fonts */
  --font-arabic: var(
    --font-noto-sans-arabic,
    system-ui,
    -apple-system,
    sans-serif
  );
  --font-numeric: var(--font-inter, system-ui, -apple-system, sans-serif);
  /* App-wide default font is Noto Sans Arabic, including for English copy */
  --font-sans: var(--font-arabic);

  /* Semantic Colors */
  --success: #2e7d32;
  --success-light: #e8f5e9;
  --mistake: #c62828;
  --mistake-light: #ffebee;
  --warning: #f4a300;
  --warning-light: #fef6e4;
  --information: #48b5ed;
  --information-light: #eaf7fe;

  /* Order status colors */
  --status-under-review: #e65100;
  --status-under-review-light: #fef6e4;
  --status-confirm: #48b5ed;
  --status-confirm-light: #eaf7fe;
  --status-in-the-way: #6a1b9a;
  --status-in-the-way-light: #f3e5f5;
  --status-service-started: #00579a;
  --status-service-started-light: #eaf7fe;
  --status-completed: #2e7d32;
  --status-completed-light: #e8f5e9;
  --status-cancelled: #c62828;
  --status-cancelled-light: #ffebee;
  --status-under-dispute: #e65100;
  --status-under-dispute-light: #fbe9e7;
  --status-closed: #6b7c8f;
  --status-closed-light: #eaf7fe;

  /* Btn Color */
  --btn-color-primary: #00579a;
  --btn-color-primary-hover: #004378;
  --btn-color-primary-text: #ffffff;
  --btn-color-primary-disabled: #bfe3f7;
  --btn-color-primary-disabled-text: #6b7c8f;
  --btn-color-call-to-action: #f4a300;
  --btn-color-call-to-action-hover: #d89200;
  --btn-color-call-to-action-text: #102a43;
  --btn-color-call-to-action-disabled: #bfe3f7;
  --btn-color-call-to-action-disabled-text: #6b7c8f;
  --btn-color-secondary: #ffffff;
  --btn-color-sedondary-border: #00579a; /* Border for secondary bytton and also same for hover */
  --btn-color-secondary-hover: #eaf7fe;
  --btn-color-sedondary-text: #00579a;
  --btn-color-secondary-disabled: #bfe3f7;
  --btn-color-secondary-disabled-text: #6b7c8f;
  --btn-color-sedondary-disabled-border: #bfe3f7;
  --btn-color-ghost: #ffffff;
  --btn-color-ghost-hover: #eaf7fe;
  --btn-color-ghost-text: #00579a;
  --btn-color-ghost-disabled: #bfe3f7;
  --btn-color-ghost-disabled-text: #bfe3f7;

  /* Toast Color */
  --toast-color-success-bg: #e8f5e9;
  --toast-color-success-text: #102a43;
  --toast-color-success-icon: #2e7d32;
  --toast-color-error-bg: #ffebee;
  --toast-color-error-text: #102a43;
  --toast-color-error-icon: #c62828;
  --toast-color-info-bg: #eaf7fe;
  --toast-color-info-text: #102a43;
  --toast-color-info-icon: #00579a;

  /* Stepper */
  --stepper-color-active: #00579a;
  --stepper-color-complete: #2e7d32;
  --stepper-color-on: #ffffff;
  --stepper-color-inactive: #bfe3f7;

  /* OTP input */
  --otp-color-error-bg: #fff0f0;

  /* Badges */
  --badge-color-confirm-bg: #eaf7fe;
  --badge-color-confirm-text: #48b5ed;
  --badge-color-under-review-bg: #fef6e4;
  --badge-color-under-review-text: #e65100;
  --badge-color-on-the-way-bg: #f3e5f5;
  --badge-color-on-the-way-text: #6a1b9a;
  --badge-color-service-started-bg: #eaf7fe;
  --badge-color-service-started-text: #00579a;
  --badge-color-complete-bg: #e8f5e9;
  --badge-color-complete-text: #2e7d32;
  --badge-color-cancel-bg: #ffebee;
  --badge-color-cancel-text: #c62828;
  --badge-color-under-dispute-bg: #fbe9e7;
  --badge-color-under-dispute-text: #e65100;
  --badge-color-closed-bg: #eaf7fe;
  --badge-color-closed-text: #6b7c8f;

  /* shadcn semantic tokens mapped to the figma palette */
  --card: var(--surface);
  --card-foreground: var(--foreground);
  --popover: var(--surface);
  --popover-foreground: var(--foreground);
  --primary: var(--primary-blue);
  --primary-foreground: #ffffff;
  --secondary: #d9effd;
  --secondary-foreground: var(--foreground);
  --muted: var(--background);
  --muted-foreground: var(--secondary-text);
  --accent: #d9effd;
  --accent-foreground: var(--foreground);
  --destructive: var(--mistake);
  --input: var(--border);
  --ring: var(--primary-blue);
  --chart-1: var(--primary-blue);
  --chart-2: var(--primary-sky-blue);
  --chart-3: var(--primary-amber);
  --chart-4: var(--success);
  --chart-5: var(--mistake);
  --radius: 0.625rem;
  --sidebar: var(--surface);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary-blue);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #d9effd;
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--primary-blue);
}

/* .dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.45 0.085 224.283);
  --primary-foreground: oklch(0.984 0.019 200.873);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.809 0.105 251.813);
  --chart-2: oklch(0.623 0.214 259.815);
  --chart-3: oklch(0.546 0.245 262.881);
  --chart-4: oklch(0.488 0.243 264.376);
  --chart-5: oklch(0.424 0.199 265.638);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.715 0.143 215.221);
  --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
} */

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    /* @apply bg-background text-foreground font-sans; */
    @apply bg-body-background text-foreground font-sans;
  }
  html {
    @apply font-sans;
  }

  /* Make autofilled <input>s render with a TRANSPARENT background so they
     blend with the field/card instead of showing the browser's lavender fill.
     `background-color: transparent` is ignored by Chrome/WebKit for autofill,
     and the `box-shadow inset` trick can only mask with a SOLID color — neither
     gives real transparency. `background-clip: text` clips the autofill fill to
     the glyph shapes, and since we set the text color explicitly the fill ends
     up invisible, letting the surface behind show through. The long
     `transition` delay keeps Chrome from repainting the native fill on
     focus/blur. !important is required because Input carries a `shadow-xs`
     utility whose layer would otherwise win. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: var(--main-text) !important;
    caret-color: var(--main-text);
    transition: background-color 99999s ease-in-out 0s;
  }
}

@layer components {
  [data-sonner-toast][data-styled="true"][data-type="success"] {
    background: var(--toast-color-success-bg) !important;
    color: var(--toast-color-success-text);
    border-color: transparent;
  }

  [data-sonner-toast][data-styled="true"][data-type="error"] {
    background: var(--toast-color-error-bg) !important;
    color: var(--toast-color-error-text);
    border-color: transparent;
  }

  [data-sonner-toast][data-styled="true"][data-type="info"] {
    background: var(--toast-color-info-bg) !important;
    color: var(--toast-color-info-text);
    border-color: transparent;
  }

  [data-sonner-toast][data-styled="true"][data-type="success"] [data-title],
  [data-sonner-toast][data-styled="true"][data-type="success"]
    [data-description] {
    color: var(--toast-color-success-text);
  }

  [data-sonner-toast][data-styled="true"][data-type="error"] [data-title],
  [data-sonner-toast][data-styled="true"][data-type="error"]
    [data-description] {
    color: var(--toast-color-error-text);
  }

  [data-sonner-toast][data-styled="true"][data-type="info"] [data-title],
  [data-sonner-toast][data-styled="true"][data-type="info"] [data-description] {
    color: var(--toast-color-info-text);
  }

  [data-sonner-toast][data-styled="true"][data-type="success"] [data-icon] svg {
    color: var(--toast-color-success-icon);
  }

  [data-sonner-toast][data-styled="true"][data-type="error"] [data-icon] svg {
    color: var(--toast-color-error-icon);
  }

  [data-sonner-toast][data-styled="true"][data-type="info"] [data-icon] svg {
    color: var(--toast-color-info-icon);
  }
}