/**
 * This file is meant to be imported by any app that consumes react-ui so that
 * everyone can use the same theme variables like all our named colors.
 * So don't add any styles that are specific to react-ui's storybook build here.
 */
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);

/**
 * We can't assume that our consumers can load tailwind's preflight
 * because it might conflict with their existing css reset:
 * (like the ones at the top of apps/pxm/src/app/global.css)
 * So we don't load tailwind's preflight here.
 *
 *
 * In practice, this means that if you are using tailwind classes in your app, you might need to
 * explicitly add a few more tailwind classes to reset something that in a tailwind playground
 * would already be reset for you.
 * But honestly, we should consider adopting more of tailwind's preflight,
 * because it resets more than we are (like a lot of modern stuff that didn't exist when
 * we first made our resets) and it would probably be good to do that.
 * We'd just need to reconcile things like its font-family with our existing font-family.
 * For more info of what's in tailwind preflight, see:
 * https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
 *
 *
 * If you're starting a new app that consumes react-ui, or know that it is
 * ok for your app to use tailwind's preflight, do this:
 *
 ```css
 @import "tailwindcss/preflight.css" layer(base);
 @import "@patterninc/react-ui/pattern-themed-tailwind.css";
 ```
 */

@import 'tailwindcss/utilities.css' layer(utilities);

/*
* This makes it so you can't use all of the colors from tailwind's
* default color pallete, you can only use these named colors.

*/
@theme {
  --color-*: initial;

  /* FONT FAMILY */
  --font-wix: 'Wix Madefor Display', sans-serif;

  /* BREAKPOINTS */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1680px;

  /* BLUES */
  --color-blue: #009af0;
  --color-dark-blue: #005e95;
  --color-medium-blue: #c3e2fd;
  --color-light-blue: #ebf5ff;

  /* GREENS */
  --color-green: #31a56d;
  --color-dark-green: #1a6541;
  --color-medium-green: #c4e8d1;
  --color-light-green: #ecf6f0;
  --color-disabled-green: #77e7cc;

  /* REDS */
  --color-red: #e54d2e;
  --color-dark-red: #aa371f;
  --color-medium-red: #fecdc2;
  --color-light-red: #ffeeea;

  /* YELLOWS */
  --color-yellow: #ffcb2f;
  --color-dark-yellow: #806512;
  --color-medium-yellow: #ffe6a9;
  --color-light-yellow: #fffaee;

  /* PURPLES */
  --color-purple: #8184a9;
  --color-dark-purple: #1d3261;
  --color-medium-purple: #d7d8e5;
  --color-light-purple: #f4f4f8;

  /* GRAYS & BLACKS */
  --color-black: #1c1e1f;
  --color-dark-gray: #36383c;
  --color-gray: #70757b;
  --color-medium-gray: #b8bcbf;
  --color-light-gray: #e7eaeb;
  --color-lighter-gray: #f8f8f8;
  --color-faint-gray: #fbfbfb;
  --color-disabled-gray: #979b9f;
  --color-white: #ffffff;

  /* GRAY SCALE */
  --color-gray-50: #f8f9fa;
  --color-gray-100: #eff0f1;
  --color-gray-200: #e7e9e9;
  --color-gray-300: #dfe2e3;
  --color-gray-400: #cccfd1;
  --color-gray-500: #9b9c9d;
  --color-gray-600: #6d6f70;
  --color-gray-700: #57595a;
  --color-gray-800: #2f3132;
  --color-gray-900: #1c1e1f;

  /* BLACK SCALE */
  --color-black-50: rgba(0, 0, 0, 0.1);
  --color-black-100: rgba(0, 0, 0, 0.2);
  --color-black-200: rgba(0, 0, 0, 0.3);
  --color-black-300: rgba(0, 0, 0, 0.4);
  --color-black-400: rgba(0, 0, 0, 0.5);
  --color-black-500: rgba(0, 0, 0, 0.6);
  --color-black-600: rgba(0, 0, 0, 0.7);
  --color-black-700: rgba(0, 0, 0, 0.8);
  --color-black-800: rgba(0, 0, 0, 0.9);
  --color-black-900: rgba(0, 0, 0, 1);

  /* WHITE SCALE */
  --color-white-50: rgba(255, 255, 255, 0.1);
  --color-white-100: rgba(255, 255, 255, 0.2);
  --color-white-200: rgba(255, 255, 255, 0.3);
  --color-white-300: rgba(255, 255, 255, 0.4);
  --color-white-400: rgba(255, 255, 255, 0.5);
  --color-white-500: rgba(255, 255, 255, 0.6);
  --color-white-600: rgba(255, 255, 255, 0.7);
  --color-white-700: rgba(255, 255, 255, 0.8);
  --color-white-800: rgba(255, 255, 255, 0.9);
  --color-white-900: rgba(255, 255, 255, 1);

  /* ADVANCED PALETTE */
  --color-lavender: #4859e5;
  --color-light-lavender: #f7f8ff;
  --color-orange: #f3be6c;
  --color-light-orange: #fff9f0;
  --color-pink: #f869bc;
  --color-light-pink: #fff5fb;
  --color-teal: #4ee5ee;
  --color-light-teal: #f2ffff;

  /* SHADOW */
  --color-button-shadow-color: rgba(0, 0, 0, 0.15);

  /* CHART BLUES */
  --color-chart-light-6-blue: #e4f3fa;
  --color-chart-light-5-blue: #c7dfee;
  --color-chart-light-4-blue: #a6cce5;
  --color-chart-light-3-blue: #85badb;
  --color-chart-light-2-blue: #63a7d1;
  --color-chart-light-1-blue: #4194c7;
  --color-chart-standard-blue: #2081be;
  --color-chart-dark-1-blue: #1b6da1;
  --color-chart-dark-2-blue: #165984;
  --color-chart-dark-3-blue: #114667;
  --color-chart-dark-4-blue: #0c334b;
  --color-chart-dark-5-blue: #08202f;

  /* CHART REDS */
  --color-chart-light-6-red: #fde5e5;
  --color-chart-light-5-red: #fac9c7;
  --color-chart-light-4-red: #f7a8a6;
  --color-chart-light-3-red: #f48885;
  --color-chart-light-2-red: #f16863;
  --color-chart-light-1-red: #ee4741;
  --color-chart-standard-red: #ec2720;
  --color-chart-dark-1-red: #c8211b;
  --color-chart-dark-2-red: #a41b16;
  --color-chart-dark-3-red: #811511;
  --color-chart-dark-4-red: #5e0f0c;
  --color-chart-dark-5-red: #3b0908;

  /* CHART GREENS */
  --color-chart-light-6-green: #e0f8f3;
  --color-chart-light-5-green: #c0f1e5;
  --color-chart-light-4-green: #9be8d6;
  --color-chart-light-3-green: #76e0c7;
  --color-chart-light-2-green: #51d8b8;
  --color-chart-light-1-green: #2bcfa8;
  --color-chart-standard-green: #05c799;
  --color-chart-dark-1-green: #04a881;
  --color-chart-dark-2-green: #038a6a;
  --color-chart-dark-3-green: #026c53;
  --color-chart-dark-4-green: #014f3c;
  --color-chart-dark-5-green: #013126;

  /* CHART YELLOWS */
  --color-chart-light-6-yellow: #fefae7;
  --color-chart-light-5-yellow: #fcf6ca;
  --color-chart-light-4-yellow: #faf1aa;
  --color-chart-light-3-yellow: #f8eb8b;
  --color-chart-light-2-yellow: #f7e66c;
  --color-chart-light-1-yellow: #f5e14c;
  --color-chart-standard-yellow: #f4dc2c;
  --color-chart-dark-1-yellow: #ceba25;
  --color-chart-dark-2-yellow: #a9981e;
  --color-chart-dark-3-yellow: #857818;
  --color-chart-dark-4-yellow: #615711;
  --color-chart-dark-5-yellow: #3d370b;

  /* CHART PURPLES */
  --color-chart-light-6-purple: #faeaff;
  --color-chart-light-5-purple: #ecc5fd;
  --color-chart-light-4-purple: #e0a3fd;
  --color-chart-light-3-purple: #d581fc;
  --color-chart-light-2-purple: #ca5ffb;
  --color-chart-light-1-purple: #be3cfa;
  --color-chart-standard-purple: #b319fa;
  --color-chart-dark-1-purple: #9715d3;
  --color-chart-dark-2-purple: #7c11ad;
  --color-chart-dark-3-purple: #610d88;
  --color-chart-dark-4-purple: #470963;
  --color-chart-dark-5-purple: #2c063e;

  /* CHART ROYALS */
  --color-chart-light-6-royal: #e5e5f8;
  --color-chart-light-5-royal: #cac6f3;
  --color-chart-light-4-royal: #aba5eb;
  --color-chart-light-3-royal: #8c83e4;
  --color-chart-light-2-royal: #6d62dd;
  --color-chart-light-1-royal: #4d40d6;
  --color-chart-standard-royal: #2e1ecf;
  --color-chart-dark-1-royal: #2619af;
  --color-chart-dark-2-royal: #1f148f;
  --color-chart-dark-3-royal: #191071;
  --color-chart-dark-4-royal: #120b52;
  --color-chart-dark-5-royal: #0b0733;

  /* CHART TEALS */
  --color-chart-light-6-teal: #e3ffff;
  --color-chart-light-5-teal: #bff4f7;
  --color-chart-light-4-teal: #99eef2;
  --color-chart-light-3-teal: #73e8ed;
  --color-chart-light-2-teal: #4de1e8;
  --color-chart-light-1-teal: #26dbe3;
  --color-chart-standard-teal: #00d5df;
  --color-chart-dark-1-teal: #00b4bd;
  --color-chart-dark-2-teal: #00949b;
  --color-chart-dark-3-teal: #007479;
  --color-chart-dark-4-teal: #005458;
  --color-chart-dark-5-teal: #003537;

  /* CHART PINKS */
  --color-chart-light-6-pink: #ffe3f2;
  --color-chart-light-5-pink: #ffbfe5;
  --color-chart-light-4-pink: #ff99d6;
  --color-chart-light-3-pink: #ff73c7;
  --color-chart-light-2-pink: #ff4db8;
  --color-chart-light-1-pink: #ff26a8;
  --color-chart-standard-pink: #ff0099;
  --color-chart-dark-1-pink: #d80081;
  --color-chart-dark-2-pink: #b1006a;
  --color-chart-dark-3-pink: #8b0053;
  --color-chart-dark-4-pink: #65003c;
  --color-chart-dark-5-pink: #3f0026;

  /* CHART ORANGES */
  --color-chart-light-6-orange: #fff1e7;
  --color-chart-light-5-orange: #ffe2ca;
  --color-chart-light-4-orange: #ffd1aa;
  --color-chart-light-3-orange: #ffc08b;
  --color-chart-light-2-orange: #ffaf6b;
  --color-chart-light-1-orange: #ffa252;
  --color-chart-standard-orange: #ff8d2b;
  --color-chart-dark-1-orange: #d87724;
  --color-chart-dark-2-orange: #b1621d;
  --color-chart-dark-3-orange: #8b4d17;
  --color-chart-dark-4-orange: #653811;
  --color-chart-dark-5-orange: #3f230a;

  /* ANIMATIONS */
  /* Slide animations to replace Animate.css slideInRight/slideOutRight */
  --animate-slide-in-right: slideInRight 0.25s ease-out forwards;
  --animate-slide-out-right: slideOutRight 0.25s ease-in forwards;
  /* Fade animation */
  --animate-fade-in: fadeIn 0.5s ease-in-out;
  /* Ellipsis animation */
  --animate-ellipsis: fadeInOut 1s ease-in-out infinite;
}

/* Keyframes for slide animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInOut {
  0%,
  80%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

/* Custom font size utilities */
@layer utilities {
  .text-2xs {
    font-size: 0.625rem; /* 10px */
    line-height: calc(0.75 / 0.625); /* 12px/10px = 1.2 */
  }

  .text-2xl {
    font-size: 1.375rem; /* 22px */
    line-height: calc(1.75 / 1.375); /* 28px/22px ≈ 1.273 */
  }
}

@layer base {
  /* This is a workaround for the fact that Tailwind doesn't support the all: unset property. Doing it this way will allow us to have a low specificity for this class name. */
  .all-unset {
    all: unset;
  }
}

/**
 * Ensures Tailwind always scans the react-ui/src directory for class names,
 * even when this package is used as a dependency (e.g., in <repo root>/apps/*).
 * This is necessary because Tailwind does not scan node_modules by default,
 * so consumers would otherwise miss out on react-ui's Tailwind classes.
 * See: https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
 */
@source '../';