@use 'sass:map';

$breakpoints: (
  tiny: 320px,
  small: 640px,
  medium: 768px,
  large: 1024px,
  very-large: 1280px,
  extra-large: 1536px,
  ultra-large: 2560px,
);

// Color are chosen from TailwindCSS color scheme
// https://tailwindcss.com/docs/customizing-colors

// transitions
$transition-duration: 0.3s;
$transition-type: ease-out;

// borders and shadows
$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);

// themes
$themes: (
  'light': (
    'accent-color': #8BC34A,         /* A bright, fresh green */
    'hover-over-accent-color': #689F38, /* Slightly darker for hover feedback */
    'text-over-accent-color': #FFFFFF,   /* White for good contrast on the accent */
    'bg-primary': #F1F8E9,           /* Very light, almost off-white green */
    'bg-primary-inverse': #33691E,    /* Dark green for contrasting elements */
    'bg-secondary': #DCEDC8,          /* Slightly darker light green for subtle separation */
    'bg-card': #FFFFFF,              /* Clean white for content cards */
    'heading-color': #33691E,         /* Dark green for strong heading contrast */
    'text-color': #212121,            /* Dark gray for readable body text */
    'inverse-text-color': #FFFFFF,    /* White for text on dark backgrounds */
    'muted-text-color': #757575,      /* Medium gray for less important text */
    'inline-code-color': #AED581,     /* Light green to highlight inline code */
    'highlight-color': #CCFF90,       /* A very light, bright green for highlighting */
    'footer-color': #E0E7DA,          /* A slightly darker shade of the primary background */  ),
  'dark': (
    'accent-color': #AED581,         /* A lighter green to stand out on dark */
    'hover-over-accent-color': #8BC34A, /* Slightly lighter for hover feedback */
    'text-over-accent-color': #212121,   /* Dark gray for good contrast on the accent */
    'bg-primary': #1B5E20,           /* A deep, dark green */
    'bg-primary-inverse': #F1F8E9,    /* Very light green for contrasting elements */
    'bg-secondary': #2E7D32,          /* Slightly lighter dark green for subtle separation */
    'bg-card': #388E3C,              /* A medium dark green for content cards */
    'heading-color': #F1F8E9,         /* Very light green for strong heading contrast */
    'text-color': #E0E7DA,            /* Light gray/off-white for readable body text */
    'inverse-text-color': #212121,    /* Dark gray for text on light backgrounds */
    'muted-text-color': #9E9E9E,      /* Medium gray for less important text */
    'inline-code-color': #CCFF90,     /* Light, bright green to highlight inline code */
    'highlight-color': #8BC34A,       /* A brighter green for highlighting */
    'footer-color': #2E7D32,          /* A slightly lighter shade of the primary background */
  ),
);

$brand-colors: (
  'facebook': #3b5998,
  'twitter': #1da1f2,
  'linkedin': #0077b5,
  'reddit': #ff4500,
  'tumblr': #35465c,
  'pocket': #ef4056,
  'diaspora': #1e1e1e,
  'whatsapp': #25d366,
  'instagram':#E1306C
);

$alerts: (
  'success': (
    // green 100
    'bg-color': #dcfce7,
    // green 800
    'text-color': #166534,
  ),
  'info': (
    // sky 100
    'bg-color': #e0f2fe,
    // sky 800
    'text-color': #075985,
  ),
  'warning': (
    // yellow 100
    'bg-color': #fef9c3,
    // yellow 800
    'text-color': #854d0e,
  ),
  'danger': (
    // red 100
    'bg-color': #fee2e2,
    // red 800
    'text-color': #991b1b,
  ),
);