/* ------
ROOT VARS
------ */
:root {
  --transition-duration: 0.3s;
  --transition-timing: ease;
  --transition-hover: 0.2s;
  
  --font-size-base: 16px;
  --font-size-p: 1rem; 
  --font-size-h6: 1.25rem;   
  --font-size-h5: 1.563rem;     
  --font-size-h4: 1.953rem;     
  --font-size-h3: 2.441rem;      
  --font-size-h2: 3.052rem;     
  --font-size-h1: 3.815rem;    
  
  --font-size-smaller: 0.8rem;
  --font-size-tiny: 0.75rem; 
  --font-size-small: 0.9rem;
  --font-size-tiniest: 0.6875rem;
  --font-size-code: 0.9rem;
  
  --font-family-mono: 'JetBrains Mono', monospace;
  
  --line-height-base: 1.5;     
  --line-height-p: 1.5;        
  --line-height-h6: 1.4;      
  --line-height-h5: 1.35;    
  --line-height-h4: 1.3;     
  --line-height-h3: 1.2;     
  --line-height-h2: 1.1;     
  --line-height-h1: 1.0;      
  --line-height-code: 1.5;
  
  --letter-spacing-p: 0%;        
  --letter-spacing-h6: -0.5%;   
  --letter-spacing-h5: -0.75%;  
  --letter-spacing-h4: -1.0%;  
  --letter-spacing-h3: -1.5%;  
  --letter-spacing-h2: -1.75%;  
  --letter-spacing-h1: -2.0%;  
  --letter-spacing-label: 0.5px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  --color-text: #000;
  --color-text-secondary: #555;
  --color-text-tertiary: #777;
  --color-text-muted: #666;
  --color-background: #fff;
  --color-background-secondary: #fafafa;
  --color-background-code: #f8f6f6;
  --color-background-prism: #f6f8fa;
  --color-background-inline-code: rgba(175, 184, 193, 0.2);
  
  --color-border: #000;
  --color-border-light: #e1e4e8;
  --color-border-medium: #d1d5da;
  --color-border-table: #000;
  
  --color-pub: #005fcc;
  --color-blog: #007f00;
  --color-tutorial: #f0c000;
  --color-focus: #005fcc;
  
  --color-label-bg: #e1e4e8;
  --color-label-text: #586069;
  --color-label-border: #e1e4e8;
  
  --color-syntax-text: #24292f;
  --color-syntax-comment: #656d76;
  --color-syntax-punctuation: #24292f;
  --color-syntax-property: #0550ae;
  --color-syntax-string: #0a3069;
  --color-syntax-keyword: #cf222e;
  --color-syntax-function: #8250df;
  --color-syntax-variable: #953800;
  
  --spacing-xs: 3px;
  --spacing-sm: 5px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 15px;
  --spacing-xxl: 20px;
  --spacing-section: 16px;
  
  --padding-xs: 4px;
  --padding-sm: 5px;
  --padding-md: 8px;
  --padding-lg: 12px;
  --padding-xl: 16px;
  --padding-code: 5px;
  --padding-code-block: 18px 16px 16px;
  --padding-label: 4px 12px;
  --padding-button: 4px 8px 4px 28px;
  
  --max-width: 80ch;
  --min-height: calc(100vh - 20px);
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  --border-radius-small: 3px;
  --border-radius-medium: 4px;
  --border-radius-large: 6px;
  --border-radius-label: 0 6px 0 6px;
  
  --z-index-label: 1;
  
  --icon-size: 14px;
  
  --hover-bg: rgba(0, 0, 0, 0.05);
  --outline-width: 2px;
  --outline-offset: 2px;
}

.dark-mode {
  --color-text: #e0e0e0;
  --color-text-secondary: #aaa;
  --color-text-tertiary: #888;
  --color-text-muted: #aaa;
  --color-background: #121212;
  --color-background-secondary: #1e1e1e;
  --color-background-code: #2c2c2c;
  --color-background-prism: #161b22;
  --color-background-inline-code: rgba(110, 118, 129, 0.4);
  
  --color-border-table: #555;
  --color-border-light: #30363d;
  
  --color-pub: #4dabf7;
  --color-blog: #4daf50;
  --color-tutorial: #ffd700;
  
  --color-label-bg: #30363d;
  --color-label-text: #7d8590;
  --color-label-border: #30363d;
  
  --color-syntax-text: #f0f6fc;
  --color-syntax-comment: #8b949e;
  --color-syntax-punctuation: #f0f6fc;
  --color-syntax-property: #79c0ff;
  --color-syntax-string: #a5d6ff;
  --color-syntax-keyword: #ff7b72;
  --color-syntax-function: #d2a8ff;
  --color-syntax-variable: #ffa657;
  
  --hover-bg: rgba(255, 255, 255, 0.1);
}

/* --
FONTS
-- */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ----------
CORE ELEMENTS
---------- */

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-mono);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--padding-xl) var(--padding-sm) 0;
  min-height: var(--min-height);
  background-color: var(--color-background);
  color: var(--color-text);
  text-align: justify;
  transition: background-color var(--transition-duration) var(--transition-timing), 
              color var(--transition-duration) var(--transition-timing);
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-text);
  transition: color var(--transition-duration) var(--transition-timing), 
              text-decoration var(--transition-hover) var(--transition-timing);
}

p {
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
  letter-spacing: var(--letter-spacing-p);
  margin: 1em 0;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  font-weight: var(--font-weight-extrabold);
  margin: 1.2em 0 0.6em 0;
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  font-weight: var(--font-weight-bold);
  margin: 1.1em 0 0.55em 0;
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-h3);
  font-weight: var(--font-weight-bold);
  margin: 1em 0 0.5em 0;
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
  font-weight: var(--font-weight-semibold);
  margin: 0.9em 0 0.45em 0;
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  letter-spacing: var(--letter-spacing-h5);
  font-weight: var(--font-weight-semibold);
  margin: 0.8em 0 0.4em 0;
}

h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
  font-weight: var(--font-weight-medium);
  margin: 0.7em 0 0.35em 0;
}

pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
  line-height: var(--line-height-code);
  background-color: var(--color-background-prism);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-large);
  padding: var(--padding-code-block);
  margin: var(--spacing-section) 0;
  transition: background-color var(--transition-duration) var(--transition-timing),
              border-color var(--transition-duration) var(--transition-timing);
}

code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
  line-height: var(--line-height-code);
  background-color: var(--color-background-inline-code);
  padding: var(--padding-xs);
  border-radius: var(--border-radius-small);
  transition: background-color var(--transition-duration) var(--transition-timing);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0;
}

td { 
  padding: var(--padding-sm); 
  border: var(--border-width-medium) solid var(--color-border-table);
  overflow-wrap: break-word;
  transition: border-color var(--transition-duration) var(--transition-timing);
}

/* -------------
SPECIAL ELEMENTS
------------- */

special-header {
  display: contents;
}

.nav-item { 
  text-align: center; 
}

.nav-spacer { 
  width: 100%; 
  min-width: 0;
  padding: 0;
}

.site-title { 
  margin: 0; 
  font-weight: var(--font-weight-extrabold); 
}

special-footer {
  display: contents;
}

.footer {
  margin-top: auto
}

.footer-text {
  font-size: var(--font-size-tiny);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
  transition: color var(--transition-duration) var(--transition-timing);
}

.caption {
  font-size: var(--font-size-tiniest);
  line-height: 1.3;
  margin-top: 0px;
}

.pub-item {
  padding: var(--padding-md);
  background-color: var(--color-background-secondary);
  border-radius: px;
  border-left: var(--border-width-thick) solid var(--color-pub);
  transition: background-color var(--transition-duration) var(--transition-timing), 
              border-left-color var(--transition-duration) var(--transition-timing);
}

.blog-item {
  padding: var(--padding-md);
  background-color: var(--color-background-secondary);
  border-radius: px;
  border-left: var(--border-width-thick) solid var(--color-blog);
  transition: background-color var(--transition-duration) var(--transition-timing), 
              border-left-color var(--transition-duration) var(--transition-timing);
}

.tutorial-item {
  padding: var(--padding-md);
  background-color: var(--color-background-secondary);
  border-radius: px;
  border-left: var(--border-width-thick) solid var(--color-tutorial);
  transition: background-color var(--transition-duration) var(--transition-timing), 
              border-left-color var(--transition-duration) var(--transition-timing);
}

.article-title {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
  margin-bottom: var(--spacing-sm);
}

.article-subheading1 {
  font-size: var(--font-size-base);
  line-height: var(--line-height-h6);
  letter-spacing: var(--letter-spacing-h6);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
  transition: color var(--transition-duration) var(--transition-timing);
}

.article-subheading2 {
  font-size: var(--font-size-small);  /* Use updated small size */
  line-height: 1.4;
  font-style: italic;
  color: var(--color-text-tertiary);
  transition: color var(--transition-duration) var(--transition-timing);
}

.contact-info {
	font-size: var(--font-size-smaller);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-xxl);
  justify-content: space-between;
}

.contact-item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 0 1 auto;
}

/* -------------
DARK MODE BUTTON
------------- */

.mode-button {
 background: none;
 white-space: nowrap;
 border: none;
 padding: 0;
 margin: 0;
 font: inherit;
 color: inherit;
 cursor: pointer;
 text-decoration: underline;
 border-radius: var(--border-radius-medium);
 display: flex;
 align-items: center;
 gap: var(--spacing-sm);
}

.mode-button::before {
 content: '';
 width: var(--icon-size);
 height: var(--icon-size);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
 flex-shrink: 0;
}

.dark-mode-btn::before {
 background-image: url('/icons/moon.svg');
}

.light-mode-btn::before {
 background-image: url('/icons/sun.svg');
}

.mode-button:hover {
 text-decoration: none;
}


/* ----------
MEDIA QUERIES
---------- */

@media (max-width: 768px) {
  body {
    padding: 1rem;
  }
  
  /* Scale down typography on mobile */
  :root {
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1.125rem;
  }
}

@media print {
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
}

@media (prefers-contrast: high) {
  body {
    color: #000;
    background-color: #fff;
  }
}

/* ---------
CODE STYLING
--------- */

/* Base code styling */
code[class*="language-"],
pre[class*="language-"] {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
  line-height: var(--line-height-code);
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
  word-spacing: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  color: var(--color-syntax-text);
  transition: color var(--transition-duration) var(--transition-timing);
}

/* Remove background/padding from code inside pre blocks */
pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* Code blocks with blended language labels */
pre[class*="language-"] {
  padding: var(--padding-code-block);
  margin: var(--spacing-section) 0;
  background: var(--color-background-prism);
  border: var(--border-width-thin) solid var(--color-border-light);
  border-radius: var(--border-radius-large);
  position: relative;
  transition: background-color var(--transition-duration) var(--transition-timing), 
              border-color var(--transition-duration) var(--transition-timing);
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: var(--padding-xs);
  border-radius: var(--border-radius-small);
  background: var(--color-background-inline-code);
  white-space: normal;
  transition: background-color var(--transition-duration) var(--transition-timing);
}

/* Blended language labels */
pre[class*="language-"]:before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--color-label-bg);
  color: var(--color-label-text);
  padding: var(--padding-label);
  font-size: var(--font-size-label);
  border: var(--border-width-thin) solid var(--color-label-border);
  border-radius: var(--border-radius-label);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  z-index: var(--z-index-label);
  transition: background-color var(--transition-duration) var(--transition-timing), 
              color var(--transition-duration) var(--transition-timing), 
              border-color var(--transition-duration) var(--transition-timing);
}

/* Language-specific labels */
pre[class*="language-python"]:before { content: "Python"; }
pre[class*="language-javascript"]:before { content: "JavaScript"; }
pre[class*="language-css"]:before { content: "CSS"; }
pre[class*="language-html"]:before { content: "HTML"; }
pre[class*="language-bash"]:before { content: "Bash"; }
pre[class*="language-markdown"]:before { content: "Markdown"; }
pre[class*="language-r"]:before { content: "R"; }

/* Syntax highlighting tokens with transitions */
[class*="token"] {
  transition: color var(--transition-duration) var(--transition-timing);
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-syntax-comment);
  font-style: italic;
}

.token.punctuation {
  color: var(--color-syntax-punctuation);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--color-syntax-property);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--color-syntax-string);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--color-syntax-keyword);
  font-weight: var(--font-weight-semibold);
}

.token.function,
.token.class-name {
  color: var(--color-syntax-function);
  font-weight: var(--font-weight-semibold);
}

.token.regex,
.token.important,
.token.variable {
  color: var(--color-syntax-variable);
}


/* ---------
RANDOM STUFF
--------- */

:focus-visible {
  outline: var(--outline-width) solid var(--color-focus);
  outline-offset: var(--outline-offset);
}