/* ─── Multi-Theme Architecture & Light/Dark Mode Pairings ─── */
/* Global site has Light & Dark mode. Specific themes (e.g. editorial, bauhaus-nasa, cyber-orange) */
/* are declared in page/project frontmatter (theme: "...") and support both light & dark pairings. */

/* 1. Default Theme — Light Mode */
:root,
[data-mode="light"],
[data-theme="default"][data-mode="light"] {
  --color-bg: #FCFCFC;
  --color-surface: #F2F2F2;
  --color-surface-hover: #E8E8E8;
  --color-text: #0A0A0A;
  --color-heading: #0A0A0A;
  --color-muted: #555555;
  --color-subtle: #777777;
  --color-border: #E5E5E5;
  --color-accent: #F58426;
  --color-accent-hover: #E07318;
  --color-accent-subtle: rgba(245, 132, 38, 0.12);

  --card-bg: var(--color-surface);
  --border-color: var(--color-border);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  color-scheme: light;
}

/* 1. Default Theme — Dark Mode */
[data-mode="dark"],
[data-theme="default"][data-mode="dark"],
html.dark-mode {
  --color-bg: #000028;
  --color-surface: #0a0a38;
  --color-surface-hover: #12124e;
  --color-text: #F5F2F2;
  --color-heading: #F5F2F2;
  --color-muted: #A0A0C8;
  --color-subtle: #75759E;
  --color-border: #1C1C48;
  --color-accent: #F58426;
  --color-accent-hover: #FFA255;
  --color-accent-subtle: rgba(245, 132, 38, 0.2);

  --card-bg: var(--color-surface);
  --border-color: var(--color-border);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* 2. Editorial Paper & Ink Pairing */
/* Editorial — Light (Warm parchment & stone ink) */
[data-theme="editorial"],
[data-theme="editorial"][data-mode="light"] {
  --color-bg: #F7F4EB;
  --color-surface: #ECE7DA;
  --color-surface-hover: #E3DDCF;
  --color-text: #1C1917;
  --color-heading: #0C0A09;
  --color-muted: #78716C;
  --color-subtle: #A8A29E;
  --color-border: #D6D0C2;
  --color-accent: #854D0E;
  --color-accent-hover: #713F12;
  --color-accent-subtle: rgba(133, 77, 14, 0.12);

  --card-bg: var(--color-surface);
  --border-color: var(--color-border);
  --card-shadow: 0 2px 8px rgba(28, 25, 23, 0.08);

  color-scheme: light;
}

/* Editorial — Dark (Deep warm espresso charcoal & warm parchment text) */
[data-theme="editorial"][data-mode="dark"],
[data-theme="editorial"].dark-mode,
html.dark-mode [data-theme="editorial"] {
  --color-bg: #1C1917;
  --color-surface: #262220;
  --color-surface-hover: #322D2A;
  --color-text: #F7F4EB;
  --color-heading: #FAF8F5;
  --color-muted: #A8A29E;
  --color-subtle: #78716C;
  --color-border: #44403C;
  --color-accent: #D97706;
  --color-accent-hover: #F59E0B;
  --color-accent-subtle: rgba(217, 119, 6, 0.22);

  --card-bg: var(--color-surface);
  --border-color: var(--color-border);
  --card-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* 3. Bauhaus NASA Telemetry Pairing */
/* Bauhaus NASA — Light (Stark white canvas, pitch black borders & signal red) */
[data-theme="bauhaus-nasa"],
[data-theme="bauhaus-nasa"][data-mode="light"] {
  --color-bg: #FFFFFF;
  --color-surface: #F4F4F4;
  --color-surface-hover: #EAEAEA;
  --color-text: #000000;
  --color-heading: #000000;
  --color-muted: #555555;
  --color-subtle: #777777;
  --color-border: #000000;
  --color-accent: #FF3B30;
  --color-accent-hover: #D70015;
  --color-accent-subtle: rgba(255, 59, 48, 0.1);

  --font-serif: "Space Mono", monospace;
  --card-bg: #FFFFFF;
  --border-color: #000000;
  --card-shadow: 4px 4px 0px #000000;

  color-scheme: light;
}

/* Bauhaus NASA — Dark (Stark deep space black, stark white telemetry borders & neon signal red) */
[data-theme="bauhaus-nasa"][data-mode="dark"],
[data-theme="bauhaus-nasa"].dark-mode,
html.dark-mode [data-theme="bauhaus-nasa"] {
  --color-bg: #0A0A0A;
  --color-surface: #141414;
  --color-surface-hover: #222222;
  --color-text: #FFFFFF;
  --color-heading: #FFFFFF;
  --color-muted: #AAAAAA;
  --color-subtle: #777777;
  --color-border: #FFFFFF;
  --color-accent: #FF453A;
  --color-accent-hover: #FF6961;
  --color-accent-subtle: rgba(255, 69, 58, 0.22);

  --font-serif: "Space Mono", monospace;
  --card-bg: #141414;
  --border-color: #FFFFFF;
  --card-shadow: 4px 4px 0px #FFFFFF;

  color-scheme: dark;
}

/* 4. Cyber Orange Pairing */
/* Cyber Orange — Dark (Deep obsidian with safety orange glow) */
[data-theme="cyber-orange"],
[data-theme="cyber-orange"][data-mode="dark"],
html.dark-mode [data-theme="cyber-orange"] {
  --color-bg: #0D0E11;
  --color-surface: #16181D;
  --color-surface-hover: #22252C;
  --color-text: #E6EDF3;
  --color-heading: #FFFFFF;
  --color-muted: #8B949E;
  --color-subtle: #57606A;
  --color-border: #30363D;
  --color-accent: #FF7700;
  --color-accent-hover: #FFA24A;
  --color-accent-subtle: rgba(255, 119, 0, 0.22);

  --card-bg: var(--color-surface);
  --border-color: var(--color-border);
  --card-shadow: 0 0 20px rgba(255, 119, 0, 0.08);

  color-scheme: dark;
}

/* Cyber Orange — Light (Industrial steel / concrete with laser hazard orange) */
[data-theme="cyber-orange"][data-mode="light"] {
  --color-bg: #EAECEF;
  --color-surface: #DFE2E6;
  --color-surface-hover: #D0D5DD;
  --color-text: #16181D;
  --color-heading: #0D0E11;
  --color-muted: #57606A;
  --color-subtle: #8B949E;
  --color-border: #C0C5CE;
  --color-accent: #FF6600;
  --color-accent-hover: #E05500;
  --color-accent-subtle: rgba(255, 102, 0, 0.15);

  --card-bg: var(--color-surface);
  --border-color: var(--color-border);
  --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

  color-scheme: light;
}

/* 5. Source Code Pro Pairing */
/* Source Code Pro — Light (Minimalist monospace editorial: #EFEFEF canvas, #242424 ink, Source Code Pro 300) */
[data-theme="source-code"],
[data-theme="source-code"][data-mode="light"],
[data-theme="source-code-pro"],
[data-theme="source-code-pro"][data-mode="light"] {
  --color-bg: #EFEFEF;
  --color-surface: #E4E4E4;
  --color-surface-hover: #D8D8D8;
  --color-text: #242424;
  --color-heading: #141414;
  --color-muted: #5E5E5E;
  --color-subtle: #7D7D7D;
  --color-border: #D2D2D2;
  --color-accent: #0066CC;
  --color-accent-hover: #004FA3;
  --color-accent-subtle: rgba(0, 102, 204, 0.12);

  --font-body: var(--font-source-code);
  --font-serif: var(--font-source-code);
  --font-sans: var(--font-source-code);
  --font-editorial-sans: var(--font-source-code);
  --font-display: var(--font-source-code);
  --font-mono: var(--font-source-code);
  --font-meta: var(--font-source-code);
  --font-caption: var(--font-source-code);

  --font-weight-body: 400;

  --card-bg: #F7F7F7;
  --border-color: var(--color-border);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  color-scheme: light;
}

/* Source Code Pro — Dark (Deep space terminal: #181818 canvas, #EFEFEF ink, Source Code Pro 400) */
[data-theme="source-code"][data-mode="dark"],
[data-theme="source-code"].dark-mode,
html.dark-mode [data-theme="source-code"],
[data-theme="source-code-pro"][data-mode="dark"],
[data-theme="source-code-pro"].dark-mode,
html.dark-mode [data-theme="source-code-pro"] {
  --color-bg: #181818;
  --color-surface: #242424;
  --color-surface-hover: #2E2E2E;
  --color-text: #EFEFEF;
  --color-heading: #FAFAFA;
  --color-muted: #9E9E9E;
  --color-subtle: #737373;
  --color-border: #3A3A3A;
  --color-accent: #388BFD;
  --color-accent-hover: #58A6FF;
  --color-accent-subtle: rgba(56, 139, 253, 0.2);

  --font-body: var(--font-source-code);
  --font-serif: var(--font-source-code);
  --font-sans: var(--font-source-code);
  --font-editorial-sans: var(--font-source-code);
  --font-display: var(--font-source-code);
  --font-mono: var(--font-source-code);
  --font-meta: var(--font-source-code);
  --font-caption: var(--font-source-code);

  --font-weight-body: 400;

  --card-bg: var(--color-surface);
  --border-color: var(--color-border);
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* Explicit font-family and 400 weight cascade for Source Code theme */
[data-theme="source-code"],
[data-theme="source-code"] body,
body[data-theme="source-code"],
[data-theme="source-code-pro"],
[data-theme="source-code-pro"] body,
body[data-theme="source-code-pro"] {
  font-family: var(--font-source-code);
  font-weight: 400;
}

/* Work list typography specific to Source Code Pro theme */
[data-theme="source-code"] .work-list-item-title,
[data-theme="source-code-pro"] .work-list-item-title {
  font-family: var(--font-source-code);
  font-weight: 400;
  color: #000000;
}

[data-theme="source-code"] .work-list-item-title strong,
[data-theme="source-code"] .work-list-item-title b,
[data-theme="source-code-pro"] .work-list-item-title strong,
[data-theme="source-code-pro"] .work-list-item-title b {
  font-weight: 400;
  color: #000000;
}

[data-theme="source-code"] .work-list-item-title a,
[data-theme="source-code-pro"] .work-list-item-title a {
  font-weight: 400;
  color: #000000;
}

[data-theme="source-code"] .work-list-item-support,
[data-theme="source-code-pro"] .work-list-item-support {
  font-family: var(--font-source-code);
  font-size: 1rem;
  font-weight: 400;
  color: #484848;
}

/* Dark mode adjustments for Work list in Source Code theme */
[data-theme="source-code"][data-mode="dark"] .work-list-item-title,
[data-theme="source-code"].dark-mode .work-list-item-title,
html.dark-mode [data-theme="source-code"] .work-list-item-title,
[data-theme="source-code-pro"][data-mode="dark"] .work-list-item-title,
[data-theme="source-code-pro"].dark-mode .work-list-item-title,
html.dark-mode [data-theme="source-code-pro"] .work-list-item-title {
  color: #FFFFFF;
}

[data-theme="source-code"][data-mode="dark"] .work-list-item-title strong,
[data-theme="source-code"][data-mode="dark"] .work-list-item-title b,
[data-theme="source-code"].dark-mode .work-list-item-title strong,
[data-theme="source-code"].dark-mode .work-list-item-title b,
html.dark-mode [data-theme="source-code"] .work-list-item-title strong,
html.dark-mode [data-theme="source-code"] .work-list-item-title b,
[data-theme="source-code-pro"][data-mode="dark"] .work-list-item-title strong,
[data-theme="source-code-pro"][data-mode="dark"] .work-list-item-title b,
[data-theme="source-code-pro"].dark-mode .work-list-item-title strong,
[data-theme="source-code-pro"].dark-mode .work-list-item-title b,
html.dark-mode [data-theme="source-code-pro"] .work-list-item-title strong,
html.dark-mode [data-theme="source-code-pro"] .work-list-item-title b {
  color: #FFFFFF;
}

[data-theme="source-code"][data-mode="dark"] .work-list-item-title a,
[data-theme="source-code"].dark-mode .work-list-item-title a,
html.dark-mode [data-theme="source-code"] .work-list-item-title a,
[data-theme="source-code-pro"][data-mode="dark"] .work-list-item-title a,
[data-theme="source-code-pro"].dark-mode .work-list-item-title a,
html.dark-mode [data-theme="source-code-pro"] .work-list-item-title a {
  color: #FFFFFF;
}

[data-theme="source-code"][data-mode="dark"] .work-list-item-support,
[data-theme="source-code"].dark-mode .work-list-item-support,
html.dark-mode [data-theme="source-code"] .work-list-item-support,
[data-theme="source-code-pro"][data-mode="dark"] .work-list-item-support,
[data-theme="source-code-pro"].dark-mode .work-list-item-support,
html.dark-mode [data-theme="source-code-pro"] .work-list-item-support {
  color: #A8A8A8;
}



/* Category-specific theme cascades (auto-applies to cards or containers) */
[data-category="Physical object"],
[data-category="physical-object"] {
  --category-badge-color: #2563EB;
}

[data-category="Software / UX"],
[data-category="software-ux"] {
  --category-badge-color: var(--color-accent);
}

[data-category="Data Visualization & Social Impact"],
[data-category="data-visualization"] {
  --category-badge-color: #059669;
}