/* SEMANTIC COLORS */
:root {
    --color-border-primary: #E4E7E5;
    --color-border-brand: #F2520D;
    
    --color-surface-primary: #fafafa;
    --color-surface-secondary: #f5f5f5;
    --color-surface-tertiary: #E5E5E5;
    --color-surface-brand: #F2520D;
    --color-surface-brand-weak: #FEF4F0;
    
    --color-text-primary: #0A140C;
    --color-text-secondary: #1B231C;
    --color-text-tertiary: #676F68;
    --color-text-brand: #F2520D;
}

/* SETS VALUES FOR DARK MODE BASED ON THE OS */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-border-primary: #182019;
    --color-border-brand: #F2520D;
    
    --color-surface-primary: #0A0F0B;
    --color-surface-secondary: #0C120D;
    --color-surface-tertiary: #182019;
    --color-surface-brand: #F2520D;
    
    --color-text-primary: #E6EFE8;
    --color-text-secondary: #BAC4BC;
    --color-text-tertiary: #78877A;
    --color-text-brand: #F2520D;
  }
}

/* SETS VALUES FOR DARK MODE BASED ON THE TOGGLE */
[data-theme="dark"] {
    --color-border-primary: var(--grey-300);
    --color-border-brand: var(--orange-500);
    
    --color-surface-primary: var(--grey-900);
    --color-surface-secondary: var(--grey-700);
    --color-surface-tertiary: var(--grey-500);
    --color-surface-brand: var(--orange-500);
    
    --color-text-primary: var(--grey-100);
    --color-text-secondary: var(--grey-300);
    --color-text-tertiary: var(--grey-500);
    --color-text-brand: var(--orange-500);
}

/* PRIMITIVE TEXT STYLES NEEDS FINISHING !!!!!*/
:root {
  /* Font families */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font sizes (type scale) */
  --font-size-12: 1.75rem;
  --font-size-14: 1.875rem;
  --font-size-16: 2rem;
  --font-size-18: 2.25rem;
  --font-size-20: 1.25rem;
  --font-size-24: 3rem;
  --font-size-32: 4rem;
  --font-size-40: 5rem;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;

  /* Letter spacing */
  --letter-spacing-tight: -0.02rem;
  --letter-spacing-normal: 0;
  --letter-spacing-relaxed: 0.04rem;
}

/* SEMANTIC TEXT STYLES */
:root {

/* HEADING LG */
--heading-lg-size: var(--font-size-40);
--heading-lg-weight: var(--font-weight-semibold);
--heading-lg-letter-spacing: var(--letter-spacing-normal);
--heading-lg-line-height: var(--line-height-relaxed);

/* HEADING MD */
--heading-md-size: var(--font-size-32);
--heading-md-weight: var(--font-weight-semibold);
--heading-md-letter-spacing: var(--letter-spacing-normal);
--heading-md-line-height: var(--line-height-relaxed);

/* HEADING S */
--heading-s-size: var(--font-size-24);
--heading-s-weight: var(--font-weight-semibold);
--heading-s-letter-spacing: var(--letter-spacing-relaxed);
--heading-s-line-height: var(--line-height-tight);

/* HEADING XS */
--heading-xs-weight: var(--font-weight-semibold);
--heading-xs-size: var(--font-size-16);
--heading-xs-letter-spacing: var(--letter-spacing-tight);
--heading-xs-line-height: var(--line-height-tight);

/* BODY LARGE */
--body-large-weight: var(--font-weight-medium);
--body-large-size: var(--font-size-20);
--body-large-letter-spacing: var(--letter-spacing-normal);

/* BODY */
--body-weight: var(--font-weight-medium);
--body-size: var(--font-size-16);
--body-letter-spacing: var(--letter-spacing-normal);

/* BODY BOLD */
--body-bold-weight: var(--font-weight-semibold);
--body-bold-size: var(--font-size-16);
--body-bold-letter-spacing: var(--letter-spacing-normal);

/* BODY S BOLD */
--body-s-bold-weight: var(--font-weight-medium);
--body-s-bold-size: var(--font-size-12);
--body-s-boldletter-spacing: var(--letter-spacing-normal);
--body-s-bold-line-height: var(--line-height-normal);

}