/* =========================================================
   File: assets/css/base.css
   ========================================================= */

/* ---------- BASE VARIABLES (DARK DEFAULT) ---------- */
:root {
  /* ---------- COLOR SYSTEM ---------- */

  /* Whites (used as text/light surfaces) */
  --color-white-100: #999999;
  --color-white-200: #b3b3b3;
  --color-white-300: #cccccc;
  --color-white-400: #e3e3e3;
  --color-white-450: #f4f4f4;
  --color-white-500: #ffffff;

  /* Blacks (used as backgrounds/dark surfaces) */
  --color-black-100: #454545;
  --color-black-200: #353535;
  --color-black-300: #202020;
  --color-black-400: #151515;
  --color-black-450: #040404;
  --color-black-500: #000000;

  /* Primary scale */
  --color-primary-100: #f3e2b7;
  --color-primary-200: #efbe46;
  --color-primary-300: #e4a711;
  --color-primary-400: #9c7107;
  --color-primary-500: #3d2d04;  

  /* State scale */
  --color-red-100: #E85959;
  --color-red-200: #E41717;
  --color-red-300: #120101;
  --color-yellow-100: #E8D365;
  --color-yellow-200: #E5BB13;
  --color-yellow-300: #110E01;
  --color-green-100: #57db88;
  --color-green-200: #59e08b;
  --color-green-300: #011007;

  /* ---------- TYPOGRAPHY ---------- */
  --font-primary: "Poppins", sans-serif;
  --font-secondary: "Roboto Mono", monospace;

  /* ---------- HEADINGS ---------- */
  --heading-h1-size: 2.5rem; 
  --heading-h1-line: 3rem; 
  --heading-h1-weight: 600;

  --heading-h2-size: 2rem; 
  --heading-h2-line: 2.5rem; 
  --heading-h2-weight: 600;

  --heading-h3-size: 1.5rem; 
  --heading-h3-line: 2rem;
  --heading-h3-weight: 600;

  /* ---------- BODY ---------- */
  --body-emphasis-size: 1.1rem; 
  --body-emphasis-line: 1.5rem;
  --body-emphasis-weight: 600;

  --body-regular-size: 1rem; 
  --body-regular-line: 1.5rem;
  --body-regular-weight: 400;

  /* ---------- CAPTIONS ---------- */
  --caption-emphasis-size: 0.75rem;
  --caption-emphasis-line: 1rem;
  --caption-emphasis-weight: 600;

  --caption-regular-size: 0.75rem; 
  --caption-regular-line: 1rem;
  --caption-regular-weight: 400;

  /* ---------- SPACING ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;
  --space-10: 10rem;
  --space-12: 12rem;
  --space-13: 14rem;
  --space-14: 18rem;

  /* ---------- LAYOUT ---------- */
  --main-width: 50rem;

  /* ---------- BORDERS & TRANSITIONS ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-full: 20rem;
  --border-solid-xs: 1px solid var(--color-black-400);
  --border-solid-m: 1px solid var(--color-black-300);

  /* ---------- Z INDEX ---------- */
  --z-negative: -10;
  --z-0: 0;
  --z-1: 10;
  --z-2: 100;
  --z-3: 1000;
  /* ---------- MEDIA QUERY ---------- */
  --breakpoint-mobile-max: 799px;
}