// These are meant to match Tailwind's default breakpoints.
// If we override Tailwind, we should update these as well.
$breakpoints: (
  min: 0,
  xs: 480px,
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1600px,
  3xl: 1920px,
  max: 3840px,
) !default;

:root {
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);

  /* Light theme text colors */
  // Text Color Variables
  --text-color: var(--p-surface-800);
  --text-secondary-color: var(--p-surface-700);
  --text-tertiary-color: var(--p-surface-600);
  --text-quartiary-color: var(--p-surface-500);
  --high-contrast-text-color: var(--p-surface-900);

  // Background Variables
  --main-background: var(--p-surface-100);
  --overlay-background: var(--p-surface-0);
  --navigation-background: var(--p-surface-200); // slightly darker than main for nav contrast
  --card-background: var(--p-surface-50);
  --code-background: var(--p-surface-950);

  // Semantic Background Layers (from Figma design tokens)
  --canvas-background: var(--p-surface-100);   // Same as main — uniform darkest background
  --app-background: var(--p-surface-100);      // Same as main — uniform darkest background
  --panel-background: var(--p-surface-0);      // Elevated surfaces (cards, sidebar panels)

  // List item interaction states — reusable across lists, dropdowns, menus, selectors
  --list-item-color:          var(--text-tertiary-color);
  --list-item-hover-color:    var(--text-secondary-color);
  --list-item-selected-color: var(--high-contrast-text-color);
  --list-item-hover-bg:       var(--p-surface-100);
  --list-item-selected-bg:    #bfdbfe;
}

/* Dark theme text colors */
[data-display-theme="dark"] {
  // Text Color Variables
  --text-color: var(--p-surface-50);
  --text-secondary-color: var(--p-surface-100);
  --text-tertiary-color: var(--p-surface-300);
  --text-quartiary-color: var(--p-surface-400);
  --high-contrast-text-color: var(--p-surface-0);

  // Background Variables
  --main-background: #0a0a0a;
  --navigation-background: #111111; // slightly lighter than main for nav contrast in dark
  --card-background: var(--p-surface-900);
  --overlay-background: var(--p-surface-900);
  --code-background: var(--p-surface-900);

  // Semantic Background Layers (from Figma design tokens)
  --canvas-background: #0a0a0a;   // Same as main — uniform darkest background
  --app-background: #0a0a0a;      // Same as main — uniform darkest background
  --panel-background: var(--p-stone-900);  // Widget tiles — stone 900

  // List item interaction states
  --list-item-color:          var(--text-tertiary-color);
  --list-item-hover-color:    var(--text-secondary-color);
  --list-item-selected-color: var(--high-contrast-text-color);
  --list-item-hover-bg:       var(--p-surface-800);
  --list-item-selected-bg:    color-mix(in srgb, var(--p-primary-400), transparent 88%);
}