/*===================================================== 
1. LITERAL COLOR TOKENS

This is the actual palette. These will never change meaning, safe to use directly
for anything that should stay the same color regardless of theme.

They're stored as space-separated RGB numbers (i.e 176 118 68). This allows flexible opacity syntax later, like
rgb(var(--mistletoe) / 0.25). 
=====================================================*/

:root {
  /* Light Mode Palette */
  --brown-sugar: 176 118 68;
  --medium-roast: 57 33 13;
  --irish-coffee: 115 68 30;
  --soft-pillow: 253 244 232;
  --tapioca: 222 199 179;
  --decreasing-brown: 156 119 90;
  --almond: 242 229 217;
  --polar-bear: 235 233 222;
  --mistletoe: 139 160 124;
  --statusgreen: 0 128 0;

  /* Dark Mode Palette */
  --obsidian: 18 16 22;
  --charcoal-plum: 28 24 36;
  --midnight-violet: 42 36 56;
  --muted-grape: 68 58 88;
  --dusty-iris: 110 95 138;
  --sugar-plum: 168 142 202;
  --pastel-lavender: 220 206 242;
  --soft-fog: 240 236 248;
  --electric-violet: 190 155 255;
}

/*===================================================== 
2. ROLE-BASED/THEME-AWARE COLOR TOKENS 

These point at different literal color tokens depending on [data-theme]. USE THESE (not the literal classes)
for anything STRUCTURAL; page background, body text, borders, etc. Anything that should flip
when the user toggles light/dark mode.

Default (no data-theme attribute set) = light theme, so site still looks right before JS runs.

Mappings below are a starting point- swap any of the literal tokens based on preference.
=====================================================*/

:root,
[data-theme="light"] {
  /* Page Structure */
  --bg-primary: var(--almond);
  --bg-secondary: var(--tapioca);
  --bg-tertiary: var(--medium-roast);
  --bg-accent: var(--decreasing-brown);
  --bg-highlight: var(--soft-pillow);
  --bg-status: var(--mistletoe);
  --bg-background: var(--soft-pillow);

  /* Typography */
  --text-primary: var(--medium-roast);
  --text-secondary: var(--decreasing-brown);
  --text-tertiary: var(--irish-coffee);
  --text-accent: var(--brown-sugar);
  --text-highlight: var(--soft-pillow);
  --text-footer: var(--tapioca);
  --text-status: var(--statusgreen);

  /* Accents & Highlights */
  --lborder-color: var(--tapioca);
  --dborder-color: var(--medium-roast);
}

[data-theme="dark"] {
  /* Page Structure */
  --bg-primary: var(--charcoal-plum);
  --bg-secondary: var(--charcoal-plum);
  --bg-tertiary: var(--pastel-lavender);
  --bg-accent: var(--sugar-plum);
  --bg-highlight: var(--charcoal-plum);
  --bg-background: var(--obsidian);

  /* Typography */
  --text-primary: var(--soft-fog);
  --text-secondary: var(--pastel-lavender);
  --text-tertiary: var(--sugar-plum);
  --text-accent: var(--obsidian);
  --text-highlight: var(--obsidian);

  /* Accents & Highlights */
  --lborder-color: var(--charcoal-plum);
  --dborder-color: var(--sugar-plum);
}

/*=====================================================
3. SYSTEM DESIGN TOKENS

All non-color design values live here in :root.
If a value here is changed, it'll update across the site.
=====================================================*/

:root {
  /* Font Stacks */

  --font-sans: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  --font-display: 'Birthstone Bounce', cursive;
  --font-serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;

  /* Type Scale */

  --text-xs: 0.875rem;
  --text-sm: 1rem; 
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl:2.5rem;
  
  /* Line Heights */

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-wide: 1.8;

  /* Letter Spacing */

  --tracking-tight: -0.05em;
  --tracking-wide: 0.2em;

  /* Font Weights */

  --fw-thin: 100;
  --fw-normal: 400;
  --fw-bold: 700;

  /* Spacing Scale (Padding/Margins/Gaps) */

  --space-3xs: 0.125rem; /* 2px */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px - BASE UNIT */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4.5rem; /* 72px */
  --space-4xl: 6rem; /* 96px */

  /* Component Dimensions & Borders */

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 2rem;
  --radius-full: 50%;
  
  --border-width-sm: 0.050rem;
  --border-width-std: 0.075rem;
  --icon-size-std: 1rem;

  --min-card-width:20rem;
}

/*=====================================================
4. HTML ROLE-BASED TOKENS
=====================================================*/

/* Modern Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* FIXED: 100vw/100vh includes width of vertical scrollbar, can make body/canvas stretch wider than actual element viewport*/
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: transparent;
  color: rgb(var(--text-primary));
}

html {
  background-color: rgb(var(--soft-pillow)); /* Light theme default background fallback */
}

[data-theme="dark"] {
  background-color: rgb(var(--obsidian)); /* Dark theme default background fallback*/
}

html, body {
  overflow: hidden; /* Prevents scrollbar trigger during init */
}

canvas { /*=====================================================TO DO: EXAMINE IF NECESSARY FOR MULTIPLE PARAMETERS*/
  display: block;
  position: fixed; /* Fixed: changed from absolute so it covers the screen during scoll*/
  top: -10px;
  left: -10px;
  width: calc(100% + 20px); /* FIXED: 100vw/100vh includes width of vertical scrollbar, can make body/canvas stretch wider than actual element viewport*/
  height: calc(100% + 20px); /* FIXED: 100vw/100vh includes width of vertical scrollbar, can make body/canvas stretch wider than actual element viewport*/
  z-index: -1;
  pointer-events: none;
  filter: blur(1px);
}

svg { /*=====================================================TO DO: EXAMINE IF NECESSARY FOR MULTIPLE PARAMETERS*/
  width:var(--icon-size-std);
  height: auto;
  max-width: 100%;
}

.avatar-circle { /*=====================================================TO DO: EXAMINE IF NECESSARY FOR MULTIPLE PARAMETERS*/
  border-radius: var(--radius-full);
  object-fit: cover;
  aspect-ratio: 1 / 1;
  width: 150px;
  height: 150px;
  flex-shrink: 0; /* Prevents hero flex container from shrinking image */
}

button {
  all: unset;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid rgb(var(--text-accent));
  outline-offset: 2px;
}

header nav {
  min-height: 2.5rem;
}

header nav a,
#theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  line-height: 1;
}

/*===================================================== 
5. THEMED ROLE UTILITIES

Use these for page structure so theme toggling works automatically.
=====================================================*/

.bg-primary { 
  background-color: rgb(var(--bg-primary)); 
  --active-color: var(--bg-primary);
}

.bg-secondary { 
  background-color: rgb(var(--bg-secondary)); 
  --active-color: var(--bg-secondary); /* Fixed: Was mistakenly --bg-primary */
}

.bg-accent { 
  background-color: rgb(var(--bg-accent)); 
  --active-color: var(--bg-accent);
}

.bg-tertiary { 
  background-color: rgb(var(--bg-tertiary)); 
  --active-color: var(--bg-tertiary);
}
  
.bg-highlight { 
  background-color: rgb(var(--bg-highlight)); 
  --active-color: var(--bg-highlight);
}

.bg-status { 
  background-color: rgb(var(--bg-status)); 
  --active-color: var(--bg-status);
}

/* Created as a fallback if canvas generation fails */
.bg-background {
  background-color: rgb(var(--bg-background));
  --active-color: var(--bg-background);
}

.text-primary { color: rgb(var(--text-primary)); }
.text-secondary { color: rgb(var(--text-secondary)); }
.text-tertiary { color: rgb(var(--text-tertiary)); }
.text-accent { color: rgb(var(--text-accent)); }
.text-highlight { color: rgb(var(--text-highlight)); }
.text-footer { color: rgb(var(--text-footer)); }
.text-status { color: rgb(var(--text-status)); }

/*=====================================================
6. COLOR PALETTE - LITERAL UTILITY CLASSES 

Fixed colors unaffected by theme.
=====================================================*/

/* Brown Sugar */

.brown-sugar { color: rgb(var(--brown-sugar)); }
.brown-sugar-bg { 
  background-color: rgb(var(--brown-sugar)); 
  --active-color: var(--brown-sugar);
}

/* Medium Roast */

.medium-roast { color: rgb(var(--medium-roast)); }
.medium-roast-bg { 
  background-color: rgb(var(--medium-roast)); 
  --active-color: var(--medium-roast);
}

/* Irish Coffee */

.irish-coffee { color: rgb(var(--irish-coffee)); }
.irish-coffee-bg { 
  background-color: rgb(var(--irish-coffee)); 
  --active-color: var(--irish-coffee);
}

/* Soft Pillow */

.soft-pillow { color: rgb(var(--soft-pillow)); }
.soft-pillow-bg { 
  background-color: rgb(var(--soft-pillow)); 
  --active-color: var(--soft-pillow);
}

/* Tapioca */

.tapioca { color: rgb(var(--tapioca)); }
.tapioca-bg { 
  background-color: rgb(var(--tapioca)); 
  --active-color: var(--tapioca);
}

/* Decreasing Brown */

.decreasing-brown { color: rgb(var(--decreasing-brown)); }
.decreasing-brown-bg { 
  background-color: rgb(var(--decreasing-brown)); 
  --active-color: var(--decreasing-brown);
}

/* Almond */

.almond { color: rgb(var(--almond)); }
.almond-bg { 
  background-color: rgb(var(--almond)); 
  --active-color: var(--almond);
}

/* Polar Bear */

.polar-bear { color: rgb(var(--polar-bear)); }
.polar-bear-bg { 
  background-color: rgb(var(--polar-bear)); 
  --active-color: var(--polar-bear);
}

/* Mistletoe */

.mistletoe { color: rgb(var(--mistletoe)); }
.mistletoe-bg { 
  background-color: rgb(var(--mistletoe)); 
  --active-color: var(--mistletoe);
}

/* =====================================================
7. UNIVERSAL ALPHA MODIFIERS

Combine these with ANY -bg class above, or role-based bg class.
===================================================== */

.bg-alpha-90 { background-color: rgb(var(--active-color) / 0.90); }
.bg-alpha-75 { background-color: rgb(var(--active-color) / 0.75); }
.bg-alpha-50 { background-color: rgb(var(--active-color) / 0.50); }
.bg-alpha-25 { background-color: rgb(var(--active-color) / 0.25); }

/* =====================================================
8. TYPOGRAPH UTILITIES 
===================================================== */

/* Font Families */

.arial-nova { font-family: var(--font-sans); }
.birthstone-bounce { font-family: var(--font-display); }
.bitstream-charter { font-family: var(--font-serif); }

/* Headings (linked directly to Type Scale tokens) */

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-sm); }

/* Utility Text Classes */

.xsmall-text { font-size: var(--text-xs); }
.small-text { font-size: var(--text-sm); }
.medium-text { font-size: var(--text-md); }
.large-text { font-size: var(--text-lg); }
.xlarge-text { font-size: var(--text-xl); }

/* Line Heights */

.small-line-height { line-height: var(--lh-tight); }
.medium-line-height { line-height: var(--lh-normal); } 
.large-line-height { line-height: var(--lh-wide); }

/* Letter Spacing */

.small-spaced-text {letter-spacing: var(--tracking-tight);}
.large-spaced-text {letter-spacing: var(--tracking-wide);}

/* Font Weights */

.thin-weight {font-weight: var(--fw-thin);}
.normal-weight {font-weight: var(--fw-normal);}
.bold-weight {font-weight: var(--fw-bold);}

/* Text Alignment & Decoration */

.text-align-center { text-align: center; }
.no-text-decoration { text-decoration: none; }

/* =====================================================
9. LAYOUT, BOX MODEL & SPACING
===================================================== */

/* Page Grid Layout */

.grid-container { /*=====================================================TO DO: EXAMINE IF NECESSARY FOR MULTIPLE PARAMETERS*/
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

/* Flexbox Helpers */

.block {display: block;}
.flex {display: flex;}

.row {flex-direction: row;}
.column {flex-direction: column;}

.fit-content {width: fit-content;}

.space-between {justify-content: space-between;}
.space-evenly {justify-content: space-evenly;}
.justify-center {justify-content: center;}

.alignc-center { align-content: center;}
.aligni-center { align-items: center; }

/* Flex & Grid Gaps */
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* Border & Radius Utilities */

.lborder { border: var(--border-width-std, 0.075rem) solid rgb(var(--lborder-color)); }
.dborder { border: var(--border-width-std, 0.075rem) solid rgb(var(--dborder-color)); }

.lborder-t { border-top: var(--border-width-sm, 0.050rem) solid rgb(var(--lborder-color)); }
.lborder-b { border-bottom: var(--border-width-sm, 0.050rem) solid rgb(var(--lborder-color)); }

.dborder-t { border-top: var(--border-width-sm, 0.050rem) solid rgb(var(--dborder-color)); }
.dborder-b { border-bottom: var(--border-width-sm, 0.050rem) solid rgb(var(--dborder-color)); }

.bevel-corners { border-radius: var(--radius-sm); }
.rounded-corners { border-radius: var(--radius-md); }
.circle-corners { border-radius: var(--radius-lg); }

/* Padding Utilities */

.p-2xs { padding: var(--space-2xs); }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }
.p-4xl { padding: var(--space-4xl); }

.px-xs { padding-inline: var(--space-xs); }
.px-sm { padding-inline: var(--space-sm); }
.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }
.px-xl { padding-inline: var(--space-xl); }
.px-2xl { padding-inline: var(--space-2xl); }
.px-3xl { padding-inline: var(--space-3xl); }
.px-4xl { padding-inline: var(--space-4xl); }

.py-2xs { padding-block: var(--space-2xs); }
.py-xs { padding-block: var(--space-xs); }
.py-sm { padding-block: var(--space-sm); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }
.py-xl { padding-block: var(--space-xl); }
.py-2xl { padding-block: var(--space-2xl); }
.py-3xl { padding-block: var(--space-3xl); }
.py-4xl { padding-block: var(--space-4xl); }

/* Margin Utilities */

.my-xs { margin-block: var(--space-xs); }
.my-sm { margin-block: var(--space-sm); }
.my-md { margin-block: var(--space-md); }
.my-lg { margin-block: var(--space-lg); }
.my-xl { margin-block: var(--space-xl); }
.m-none { margin: 0; }
.m-auto { margin-inline: auto;}

.min-width-color { min-width: var(--min-card-width); }

/* =====================================================
10. SPECIFIC ELEMENT DEFAULTS & BREAKOUTS
===================================================== */

.svg-gap {gap: var(--space-sm);}

/* Frosted Glass Effect */
.glass {
  /*Blurs the canvas/content underneath element*/
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.05);
}

/* =====================================================
11. WEB COMPONENT SKELETONS GUARDS
===================================================== */

/* Force custom tags to act as block-level inline elements immediately*/
/* Ensure defined custom elements retain baseline display dimensions */
h1, .birthstone-bounce {
  font-family: 'Birthstone Bounce', cursive, sans-serif;
  line-height: 1.2; /* Lock vertical height */
}

content-box,
desc-button,
tag-box {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
  contain: layout style; /* Prevents internal layout shifts from leaking out */
}

content-box {
  min-width: 7.5rem;
  min-height: 2.5rem;
}

tag-box {
  min-width: 10.5rem;
  min-height: 1.75rem;
}

desc-button {
  display: block;
  width: 100%;
  min-height: 5.5rem;
}

/* Un-defined state prevention */
content-box:not(:defined),
desc-button:not(:defined),
tag-box:not(:defined) {
  opacity:0
}

/* Defined state */
content-box:defined,
desc-button:defined,
tag-box:defined {
  opacity: 1;
}

/* Structural page fade-in */
header,
main,
footer {
  opacity: 0;
  transform: translateY(-28px);
  will-change: opacity, transform;
  animation: slideFadeDown 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered start times */
header { animation-delay: 0.1s; }
main   { animation-delay: 0.25s; }
footer { animation-delay: 0.4s; }

/* Keyframes */
@keyframes slideFadeDown {
  0% {
    opacity: 0;
    transform: translateY(-28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
12. MEDIA BREAKPOINTS
===================================================== */

@media only screen and (max-width: 600px) {
  /*=========================s============================TO DO: ADD MEDIA BREAK POINTS*/
}