/* VARIABLES used by all pages */

:root {
  /* ------ colours ------ */
  --light: #f5f5f5;
  --dark: #333333;
  --grey-100: #f8f9fa;
  --grey-200: #e9ecef;
  --grey-300: #dee2e6;
  --grey-400: #ced4da;
  --grey-500: #adb5bd;
  --grey-600: #6c757d;
  --grey-700: #495057;
  --grey-800: #343a40;
  --grey-900: #212529;

  --primary:   #144f56;
  --secondary: #8b0000;
  --accent:    #ff00ff;
  --danger:    #ff0000;
  --warning:   #ffa500;
  --success:   #008000;
  --info:      #00ffff;
  --muted:     #dcdcdc;
  --R: red;
  --A: orange;
  --G: green;

  /* ------ navigation ------ */
  --navbar-bg: rgba(255, 255, 255, 0.5);
  --navbar-txt: var(--grey-300);

  --link-clr: rgb(255, 132, 0);
  --link-bg-clr: transparent;
  --link-hover-clr: teal;
  --nav-link-clr: var(--grey-300);

  --btn-clr: white;
  --btn-bg-clr: orange;
  --btn-hover-bg-clr: teal;
  
  --btn-radius: 4px;

  /* ------ body------ */
  --body-bg: var(--light);
  --body-color: #333;
  --body-font-family: "Open Sans", sans-serif;
  --serif: "DM Serif Display", serif;
  --body-font-size: 0.9rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --border-radius: 8px;
  --data-font-size: clamp(0.8rem, 1.8vw, 0.9rem);
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
 
  /* ------Grids & Cards------ */
  --grid-height: 375px;
  --header-height: 50px;
  --sidebar-width: 350px;
  --tech-card-width: 300px;
  --portrait-card-width: 200px;
  --square-card-width: 300px;
  --landscape-card-width: 300px;
  --card_footer: 40px;
}