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

/* EDS-Next Design Tokens */
:root {
  --blue: #1052E0;
  --green: #1E976C;
  --red: #EC3755;
  --yellow: #FCC42F;
  --white: #FFF;
  --black: #000;

  --ui-bg: #FFFFFF;
  --me-white: #FFFFFF;
  --me-bg-gray: #F7F8FA;

  --me-neutral-0: #FFFFFF;
  --me-neutral-50: #F7F8FA;
  --me-neutral-100: #F1F3F5;
  --me-neutral-200: #E2E6E9;
  --me-neutral-300: #A3ACB6;
  --me-neutral-400: #758493;
  --me-neutral-500: #566574;
  --me-neutral-600: #415260;
  --me-neutral-700: #303E49;
  --me-neutral-800: #262F35;

  --me-primary-50: #EDF3FF;
  --me-primary-100: #D0E0FF;
  --me-primary-200: #A9C6FF;
  --me-primary-300: #7CA8FF;
  --me-primary-400: #437FFF;
  --me-primary-500: #1052E0;
  --me-primary-600: #0C3DA8;
  --me-primary-700: #082970;

  --me-green-50: #E9F7F2;
  --me-green-100: #D4F9EC;
  --me-green-200: #C6ECDF;
  --me-green-300: #A9E4D0;
  --me-green-400: #43B48E;
  --me-green-500: #1E976C;
  --me-green-600: #10715D;
  --me-green-700: #0C4933;

  --me-yellow-50: #FFF4D8;
  --me-yellow-100: #FFF0C9;
  --me-yellow-200: #FFE7A9;
  --me-yellow-300: #FFDA79;
  --me-yellow-400: #FFC731;
  --me-yellow-500: #FFB731;
  --me-yellow-600: #FF9F31;
  --me-yellow-700: #9F6017;

  --me-red-50: #FFEDF0;
  --me-red-100: #FFE0E5;
  --me-red-200: #FAD4DB;
  --me-red-300: #FFB5C2;
  --me-red-400: #EF5974;
  --me-red-500: #EC3755;
  --me-red-600: #B8293B;
  --me-red-700: #811F2C;

  --me-color-secondary-purple-500: #855AED;
  --me-color-secondary-pink-500: #FF60E2;
  --me-color-secondary-blue-500: #3CC3E3;
  --me-color-secondary-lime-500: #E0ED32;

  --me-shadow-level-1: 0px 4px 8px rgba(0,0,0,0.08);
  --me-shadow-level-2: 0px 8px 24px rgba(0,0,0,0.16);
  --me-shadow-level-3: 0px 16px 32px rgba(0,0,0,0.16);
  --me-shadow-level-4: 0px 16px 48px rgba(0,0,0,0.25);

  /* Semantic aliases */
  --ui-primary: var(--me-primary-500);
  --ui-text-inverted: #ffffff;
  --ui-text: var(--me-neutral-700);
  --ui-border: var(--me-neutral-200);
  --ui-bg-elevated: var(--me-neutral-50);
}

@keyframes me-spinner-grow {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1); opacity: 1; }
  100% { opacity: 0; }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  body {
    font-family: 'Roboto', sans-serif;
    color: var(--ui-text);
    background: var(--ui-bg);
    -webkit-font-smoothing: antialiased;
  }
}