/* Shell design tokens and base reset — owned and maintained by the Shell.
   These are the only variables and base rules styles.css depends on.
   Apps must load their own CSS from the Frontend Component Library. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&display=swap');

/* --- Base reset ---*/
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

:root {
  /* Colors */
  --color-primary:        #160076;
  --color-primary-hover:  #1a0099;
  --color-primary-light:  #599DF4;
  --color-text-primary:   #3B3B3B;
  --color-text-inverse:   #FFFFFF;
  --color-text-secondary: #6B6B6B;
  --color-surface:        #FFFFFF;
  --color-surface-sunken: #ECEEF2;
  --color-background:     #F4F6F9;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Typography */
  --font-family-body:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-family-heading: 'Sora', 'Segoe UI', Arial, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-3xl:  1.875rem;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  /* Elevation */
  --shadow-lg: 0 10px 15px rgba(22, 0, 118, 0.07), 0 4px 6px rgba(22, 0, 118, 0.04);
  --z-index-dropdown: 100;
  --z-index-sticky:   200;

  /* Motion */
  --transition-duration-normal: 250ms;
}