@jsonresume/jsonresume-theme-tokyo-modernist 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @jsonresume/jsonresume-theme-tokyo-modernist
 
+## 1.0.6
+
+### Patch Changes
+
+- 304a130: Theme curation wave: full JSON Resume section coverage and SSR fixes.
+
+  - Add missing sections (Interests, Certificates, et al.) across 15+ themes so every registered theme renders all schema sections
+  - tokyo-modernist: inline styled-components (fixes webpack resolution SSR crash) — re-enabled in the registry
+  - tailwind: fix social-icon SSR crash, add 7 missing sections with missing-data guards — re-enabled in the registry
+  - Register previously orphaned desert-modern and elegant-pink themes with metadata
+  - @jsonresume/core@0.3.2
+
+## 1.0.5
+
+### Patch Changes
+
+- 965cf57: use @jsonresume/core/ssr renderResumeDocument
+- Updated dependencies [ff09f75]
+  - @jsonresume/core@0.3.1
+
 ## 1.0.4
 
 ### Patch Changes

package/dist/index.css

@@ -0,0 +1 @@
+:root{--resume-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;--resume-font-serif: Cambria, Georgia, "Times New Roman", serif;--resume-font-mono: "Courier New", Courier, monospace;--resume-size-name: 36px;--resume-size-heading: 16px;--resume-size-subheading: 14px;--resume-size-body: 11px;--resume-size-small: 10px;--resume-weight-normal: 400;--resume-weight-medium: 500;--resume-weight-semibold: 600;--resume-weight-bold: 700;--resume-line-height-tight: 1.2;--resume-line-height-normal: 1.5;--resume-line-height-relaxed: 1.75;--resume-color-primary: #1a1a1a;--resume-color-secondary: #4a4a4a;--resume-color-accent: #2563eb;--resume-color-background: #ffffff;--resume-color-border: #e5e7eb;--resume-space-section: 24px;--resume-space-item: 16px;--resume-space-tight: 8px;--resume-space-margin: 48px;--resume-max-width: 660px;--resume-column-gap: 24px;--resume-radius-sm: 4px;--resume-radius-md: 8px;--resume-radius-lg: 12px;--resume-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--resume-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1)}[data-theme=modern]{--resume-color-primary: #0f172a;--resume-color-secondary: #475569;--resume-color-accent: #8b5cf6;--resume-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif}[data-theme=classic]{--resume-color-primary: #000000;--resume-color-secondary: #333333;--resume-color-accent: #0066cc;--resume-font-sans: Georgia, "Times New Roman", serif}[data-theme=minimal]{--resume-color-primary: #18181b;--resume-color-secondary: #71717a;--resume-color-accent: #000000;--resume-space-section: 32px;--resume-space-item: 20px}[data-theme=high-contrast]{--resume-color-primary: #000000;--resume-color-secondary: #000000;--resume-color-accent: #0000ff;--resume-color-background: #ffffff;--resume-color-border: #000000}@media print{:root{--resume-space-section: 18px;--resume-space-item: 12px}@page{size:A4;margin:.5in}.resume-section{page-break-inside:avoid}.resume-item{break-inside:avoid}p,li{widows:3;orphans:3}.resume-description{hyphens:auto}.no-print{display:none!important}}[dir=rtl]{text-align:right}[dir=rtl] .resume-item{padding-left:0;padding-right:var(--resume-space-tight)}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { renderToString } from "react-dom/server";
+import { renderToStaticMarkup } from "react-dom/server";
 import o, { useRef, useContext, useState, useMemo, useEffect, useDebugValue, createElement, createContext } from "react";
 var __assign = function() {
   __assign = Object.assign || function __assign2(t) {
@@ -41,38 +41,46 @@ var isPropValid = /* @__PURE__ */ memoize(
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
-var shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
-  var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
-  if (ret !== void 0) {
-    return !!ret;
-  }
-  if (objA === objB) {
-    return true;
-  }
-  if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
-    return false;
-  }
-  var keysA = Object.keys(objA);
-  var keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
-  for (var idx = 0; idx < keysA.length; idx++) {
-    var key = keysA[idx];
-    if (!bHasOwnProperty(key)) {
+var shallowequal;
+var hasRequiredShallowequal;
+function requireShallowequal() {
+  if (hasRequiredShallowequal) return shallowequal;
+  hasRequiredShallowequal = 1;
+  shallowequal = function shallowEqual(objA, objB, compare, compareContext) {
+    var ret = compare ? compare.call(compareContext, objA, objB) : void 0;
+    if (ret !== void 0) {
+      return !!ret;
+    }
+    if (objA === objB) {
+      return true;
+    }
+    if (typeof objA !== "object" || !objA || typeof objB !== "object" || !objB) {
       return false;
     }
-    var valueA = objA[key];
-    var valueB = objB[key];
-    ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
-    if (ret === false || ret === void 0 && valueA !== valueB) {
+    var keysA = Object.keys(objA);
+    var keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length) {
       return false;
     }
-  }
-  return true;
-};
-const p = /* @__PURE__ */ getDefaultExportFromCjs(shallowequal);
+    var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
+    for (var idx = 0; idx < keysA.length; idx++) {
+      var key = keysA[idx];
+      if (!bHasOwnProperty(key)) {
+        return false;
+      }
+      var valueA = objA[key];
+      var valueB = objB[key];
+      ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
+      if (ret === false || ret === void 0 && valueA !== valueB) {
+        return false;
+      }
+    }
+    return true;
+  };
+  return shallowequal;
+}
+var shallowequalExports = requireShallowequal();
+const p = /* @__PURE__ */ getDefaultExportFromCjs(shallowequalExports);
 var MS = "-ms-";
 var MOZ = "-moz-";
 var WEBKIT = "-webkit-";
@@ -1300,6 +1308,66 @@ var vt = /^\s*<\/[a-z]/i, gt = (function() {
 "production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
 var wt = "__sc-".concat(f, "__");
 "production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[wt] || (window[wt] = 0), 1 === window[wt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[wt] += 1);
+const CSS_RESET = "<style>*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}body{-webkit-font-smoothing:antialiased}</style>";
+const TOKENS_CSS_HREF = "https://unpkg.com/@jsonresume/core/dist/tokens.css";
+const FONTS_PRECONNECT = '<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
+function isHref(value) {
+  return /^(https?:)?\/\//.test(value) || value.trim().startsWith("<link");
+}
+function familyParam(family) {
+  const [name, ...rest] = String(family).split(":");
+  const encodedName = name.trim().replace(/\s+/g, "+");
+  return rest.length ? `${encodedName}:${rest.join(":")}` : encodedName;
+}
+function googleFontsLinks(families) {
+  if (!Array.isArray(families) || families.length === 0) return "";
+  const passthrough = [];
+  const names = [];
+  for (const entry of families) {
+    if (entry == null || entry === "") continue;
+    if (isHref(entry)) passthrough.push(entry);
+    else names.push(entry);
+  }
+  const links = passthrough.map(
+    (href) => href.trim().startsWith("<link") ? href : `<link href="${href}" rel="stylesheet">`
+  );
+  if (names.length > 0) {
+    const query = names.map(familyParam).join("&family=");
+    links.unshift(
+      `<link href="https://fonts.googleapis.com/css2?family=${query}&display=swap" rel="stylesheet">`
+    );
+  }
+  if (links.length === 0) return "";
+  return FONTS_PRECONNECT + links.join("");
+}
+function renderResumeDocument(element, options = {}) {
+  const {
+    fonts,
+    title,
+    lang = "en",
+    dir = "ltr",
+    reset = false,
+    head = "",
+    headAfterStyles = "",
+    includeTokensCss = true,
+    bodyClass
+  } = options;
+  const sheet = new gt();
+  let html;
+  let styleTags;
+  try {
+    html = renderToStaticMarkup(sheet.collectStyles(element));
+    styleTags = sheet.getStyleTags();
+  } finally {
+    sheet.seal();
+  }
+  const fontLinks = googleFontsLinks(fonts);
+  const tokensLink = includeTokensCss ? `<link rel="stylesheet" href="${TOKENS_CSS_HREF}">` : "";
+  const resetTag = reset ? CSS_RESET : "";
+  const titleTag = title ? `<title>${title}</title>` : "";
+  const bodyAttr = bodyClass ? ` class="${bodyClass}"` : "";
+  return `<!DOCTYPE html><html lang="${lang}" dir="${dir}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">` + fontLinks + tokensLink + resetTag + head + styleTags + headAfterStyles + titleTag + `</head><body${bodyAttr}>${html}</body></html>`;
+}
 createContext({
   theme: "professional",
   setTheme: () => {
@@ -1459,6 +1527,7 @@ function formatDateRange({
   };
   const formatDate = (dateStr) => {
     if (!dateStr) return getPresentLabel();
+    const isDateOnlyIso = typeof dateStr === "string" && /^\d{4}(-\d{2}){0,2}$/.test(dateStr);
     const date = typeof dateStr === "string" ? new Date(dateStr) : dateStr;
     if (isNaN(date.getTime())) return dateStr;
     const monthFormats = {
@@ -1470,6 +1539,9 @@ function formatDateRange({
       ...monthFormats[format],
       year: "numeric"
     };
+    if (isDateOnlyIso) {
+      options.timeZone = "UTC";
+    }
     if (numberingSystem) {
       options.numberingSystem = numberingSystem;
     }
@@ -1477,7 +1549,9 @@ function formatDateRange({
     return formatter.format(date);
   };
   const start = formatDate(startDate);
-  if (endDate === void 0) return start;
+  if (endDate === void 0) {
+    return start;
+  }
   const end = formatDate(endDate);
   return `${start} - ${end}`;
 }
@@ -1562,7 +1636,6 @@ function safeUrl(url) {
   const trimmed = url.trim();
   const dangerousProtocols = /^(javascript|data|vbscript|file|about):/i;
   if (dangerousProtocols.test(trimmed)) {
-    console.warn(`[Security] Blocked dangerous URL: ${trimmed.slice(0, 50)}`);
     return null;
   }
   const safeProtocols = /^(https?|mailto|tel|sms|ftp):/i;
@@ -1578,7 +1651,6 @@ function safeUrl(url) {
   if (/^[a-z0-9][a-z0-9.-]+\.[a-z]{2,}$/i.test(trimmed)) {
     return `https://${trimmed}`;
   }
-  console.warn(`[Security] Uncertain URL safety: ${trimmed.slice(0, 50)}`);
   return trimmed;
 }
 const ContactContainer = dt.div`
@@ -6061,19 +6133,19 @@ const Name = dt.h1`
   font-variation-settings: 'wght' 800;
 `;
 const Label = dt.div`
-  font-size: 20px;
+  font-size: 14px;
   color: #6b7280;
   margin-bottom: 24px;
   font-weight: 500;
   letter-spacing: 0.5px;
   text-transform: uppercase;
-  font-size: 14px;
 `;
 const StyledContactInfo = dt(ContactInfo)`
   font-size: 15px;
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
+  justify-content: flex-start;
 
   a {
     font-size: 15px;
@@ -6293,13 +6365,12 @@ const SkillCategory = dt.div`
   }
 `;
 const SkillName = dt.h4`
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 700;
   color: #1a1d23;
   margin: 0 0 12px 0;
   text-transform: uppercase;
   letter-spacing: 0.3px;
-  font-size: 14px;
 `;
 const SkillTags = dt.div`
   font-size: 14px;
@@ -6319,6 +6390,7 @@ function Resume({ resume }) {
     projects = [],
     volunteer = [],
     awards = [],
+    certificates = [],
     publications = [],
     languages = [],
     interests = [],
@@ -6405,6 +6477,17 @@ function Resume({ resume }) {
         award.summary && /* @__PURE__ */ jsx(WorkSummary, { children: award.summary })
       ] }, index))
     ] }),
+    certificates?.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
+      /* @__PURE__ */ jsx(StyledSectionTitle, { children: "Certificates" }),
+      certificates.map((cert, index) => /* @__PURE__ */ jsxs(EducationItem, { children: [
+        /* @__PURE__ */ jsx(Institution, { children: cert.name }),
+        cert.issuer && /* @__PURE__ */ jsxs(Degree, { children: [
+          "Issued by ",
+          cert.issuer
+        ] }),
+        cert.date && /* @__PURE__ */ jsx(EducationDate, { children: cert.date })
+      ] }, index))
+    ] }),
     publications?.length > 0 && /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(StyledSectionTitle, { children: "Publications" }),
       publications.map((pub, index) => /* @__PURE__ */ jsxs(EducationItem, { children: [
@@ -6441,17 +6524,11 @@ function Resume({ resume }) {
   ] });
 }
 const render = (resume) => {
-  const sheet = new gt();
-  const html = renderToString(sheet.collectStyles(/* @__PURE__ */ jsx(Resume, { resume })));
-  const styles = sheet.getStyleTags();
-  return `<!DOCTYPE html><head>
-  <title>${resume.basics.name} - Resume</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <style>
+  return renderResumeDocument(/* @__PURE__ */ jsx(Resume, { resume }), {
+    fonts: [
+      "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap"
+    ],
+    head: `<style>
     html {
       font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #fafbfc;
@@ -6521,8 +6598,12 @@ const render = (resume) => {
         background: white;
       }
     }
-  </style>
-  ${styles}</head><body>${html}</body></html>`;
+  </style>`,
+    lang: "en",
+    dir: "ltr",
+    title: `${resume.basics.name} - Resume`,
+    includeTokensCss: false
+  });
 };
 export {
   Resume,

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@jsonresume/jsonresume-theme-tokyo-modernist",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "main": "./dist/index.js",
   "license": "MIT",
@@ -18,8 +18,11 @@
   ],
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
-    "vite": "^5.4.21",
-    "@repo/eslint-config-custom": "^0.0.0"
+    "vite": "^6.4.3",
+    "vitest": "^3.2.6",
+    "@repo/eslint-config-custom": "^0.0.0",
+    "@jsonresume/sample-data": "0.2.1",
+    "@jsonresume/theme-kit": "1.0.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -30,7 +33,7 @@
     "prismjs": "^1.29.0",
     "react-icons": "^5.0.1",
     "styled-components": "^6.1.19",
-    "@jsonresume/core": "^0.3.0"
+    "@jsonresume/core": "^0.3.2"
   },
   "exports": {
     ".": {
@@ -44,6 +47,8 @@
   },
   "scripts": {
     "lint": "eslint src || exit 0",
-    "build": "vite build"
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

package/src/index.jsx

@@ -1,19 +1,12 @@
-import { renderToString } from 'react-dom/server';
-import { ServerStyleSheet } from 'styled-components';
+import { renderResumeDocument } from '@jsonresume/core/ssr';
 import Resume from './ui/Resume';
 
 export const render = (resume) => {
-  const sheet = new ServerStyleSheet();
-  const html = renderToString(sheet.collectStyles(<Resume resume={resume} />));
-  const styles = sheet.getStyleTags();
-  return `<!DOCTYPE html><head>
-  <title>${resume.basics.name} - Resume</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <style>
+  return renderResumeDocument(<Resume resume={resume} />, {
+    fonts: [
+      'https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap',
+    ],
+    head: `<style>
     html {
       font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #fafbfc;
@@ -83,8 +76,12 @@ export const render = (resume) => {
         background: white;
       }
     }
-  </style>
-  ${styles}</head><body>${html}</body></html>`;
+  </style>`,
+    lang: 'en',
+    dir: 'ltr',
+    title: `${resume.basics.name} - Resume`,
+    includeTokensCss: false,
+  });
 };
 
 export { Resume };

package/src/ui/Resume.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Section, DateRange } from '@jsonresume/core';
 import {
   Layout,
@@ -24,13 +23,7 @@ import {
   SkillName,
   SkillTags,
   ProjectItem,
-} from './styles';
-
-// Tokyo Modernist Theme - Minimal futurism with typographic focus
-// Built on 8pt grid system with geometric precision
-// Outfit variable-width geometric sans from Google Fonts
-// Deep magenta accent (#c71585) with subtle gray subheaders
-// Strong headings, clean geometry, restrained asymmetry
+} from './styles.jsx';
 
 function Resume({ resume }) {
   const {
@@ -41,6 +34,7 @@ function Resume({ resume }) {
     projects = [],
     volunteer = [],
     awards = [],
+    certificates = [],
     publications = [],
     languages = [],
     interests = [],
@@ -184,6 +178,19 @@ function Resume({ resume }) {
         </Section>
       )}
 
+      {certificates?.length > 0 && (
+        <Section>
+          <StyledSectionTitle>Certificates</StyledSectionTitle>
+          {certificates.map((cert, index) => (
+            <EducationItem key={index}>
+              <Institution>{cert.name}</Institution>
+              {cert.issuer && <Degree>Issued by {cert.issuer}</Degree>}
+              {cert.date && <EducationDate>{cert.date}</EducationDate>}
+            </EducationItem>
+          ))}
+        </Section>
+      )}
+
       {publications?.length > 0 && (
         <Section>
           <StyledSectionTitle>Publications</StyledSectionTitle>

package/src/ui/{styles.js → styles.jsx}

@@ -1,6 +1,17 @@
 import styled from 'styled-components';
 import { SectionTitle, ContactInfo } from '@jsonresume/core';
 
+// Tokyo Modernist Theme - Minimal futurism with typographic focus
+// Built on 8pt grid system with geometric precision
+// Outfit variable-width geometric sans from Google Fonts
+// Deep magenta accent (#c71585) with subtle gray subheaders
+// Strong headings, clean geometry, restrained asymmetry
+//
+// NOTE: this file must keep the .jsx extension. styled-components defined in
+// a plain .js module lose webpack's ESM interop in the registry production
+// build and crash with "Cannot read properties of undefined (reading
+// 'withConfig')" — see CLAUDE.md "Theme SSR gotcha".
+
 export const Layout = styled.div`
   max-width: 840px;
   margin: 0 auto;
@@ -53,13 +64,12 @@ export const Name = styled.h1`
 `;
 
 export const Label = styled.div`
-  font-size: 20px;
+  font-size: 14px;
   color: #6b7280;
   margin-bottom: 24px;
   font-weight: 500;
   letter-spacing: 0.5px;
   text-transform: uppercase;
-  font-size: 14px;
 `;
 
 export const StyledContactInfo = styled(ContactInfo)`
@@ -67,6 +77,7 @@ export const StyledContactInfo = styled(ContactInfo)`
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
+  justify-content: flex-start;
 
   a {
     font-size: 15px;
@@ -302,13 +313,12 @@ export const SkillCategory = styled.div`
 `;
 
 export const SkillName = styled.h4`
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 700;
   color: #1a1d23;
   margin: 0 0 12px 0;
   text-transform: uppercase;
   letter-spacing: 0.3px;
-  font-size: 14px;
 `;
 
 export const SkillTags = styled.div`

package/tests/theme.test.js

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { runThemeRenderQa } from '@jsonresume/theme-kit/qa';
+import { completeResume } from '@jsonresume/sample-data';
+import { render } from '../src/index.jsx';
+
+describe('Tokyo Modernist Theme', () => {
+  it('passes the shared theme render QA gate', async () => {
+    await runThemeRenderQa({ render, name: 'tokyo-modernist', expect });
+  });
+
+  it('renders expected fields from the standard fixture', () => {
+    const html = render(completeResume);
+
+    expect(html.length).toBeGreaterThan(0);
+    expect(html).toContain('Jane Developer');
+    expect(html).toContain('jane.developer@example.com');
+  });
+});

package/dist/style.css

@@ -1,139 +0,0 @@
-/**
- * Resume Core Design Tokens
- * Framework-agnostic CSS variables for theming
- * Based on 2025 resume best practices and ATS compatibility research
- */
-
-:root {
-  /* Typography - ATS-friendly fonts */
-  --resume-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --resume-font-serif: Cambria, Georgia, "Times New Roman", serif;
-  --resume-font-mono: "Courier New", Courier, monospace;
-
-  /* Font Sizes - Optimal readability */
-  --resume-size-name: 36px;        /* Large, prominent name */
-  --resume-size-heading: 16px;     /* Section titles */
-  --resume-size-subheading: 14px;  /* Job titles, degrees */
-  --resume-size-body: 11px;        /* Body text, descriptions */
-  --resume-size-small: 10px;       /* Dates, locations, metadata */
-
-  /* Font Weights */
-  --resume-weight-normal: 400;
-  --resume-weight-medium: 500;
-  --resume-weight-semibold: 600;
-  --resume-weight-bold: 700;
-
-  /* Line Heights */
-  --resume-line-height-tight: 1.2;
-  --resume-line-height-normal: 1.5;
-  --resume-line-height-relaxed: 1.75;
-
-  /* Colors - Professional Theme (default) */
-  --resume-color-primary: #1a1a1a;
-  --resume-color-secondary: #4a4a4a;
-  --resume-color-accent: #2563eb;
-  --resume-color-background: #ffffff;
-  --resume-color-border: #e5e7eb;
-
-  /* Spacing - Consistent rhythm */
-  --resume-space-section: 24px;   /* Between major sections */
-  --resume-space-item: 16px;      /* Between list items */
-  --resume-space-tight: 8px;      /* Within items */
-  --resume-space-margin: 48px;    /* Page margins */
-
-  /* Layout - Optimal line length */
-  --resume-max-width: 660px;      /* ~80 chars at body size */
-  --resume-column-gap: 24px;
-
-  /* Border Radius */
-  --resume-radius-sm: 4px;
-  --resume-radius-md: 8px;
-  --resume-radius-lg: 12px;
-
-  /* Shadows - Subtle depth */
-  --resume-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --resume-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-/* Modern Theme Variant */
-[data-theme="modern"] {
-  --resume-color-primary: #0f172a;
-  --resume-color-secondary: #475569;
-  --resume-color-accent: #8b5cf6;
-  --resume-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-/* Classic Theme Variant */
-[data-theme="classic"] {
-  --resume-color-primary: #000000;
-  --resume-color-secondary: #333333;
-  --resume-color-accent: #0066cc;
-  --resume-font-sans: Georgia, "Times New Roman", serif;
-}
-
-/* Minimal Theme Variant */
-[data-theme="minimal"] {
-  --resume-color-primary: #18181b;
-  --resume-color-secondary: #71717a;
-  --resume-color-accent: #000000;
-  --resume-space-section: 32px;
-  --resume-space-item: 20px;
-}
-
-/* High Contrast Variant (Accessibility) */
-[data-theme="high-contrast"] {
-  --resume-color-primary: #000000;
-  --resume-color-secondary: #000000;
-  --resume-color-accent: #0000ff;
-  --resume-color-background: #ffffff;
-  --resume-color-border: #000000;
-}
-
-/* Print Styles - ATS-Friendly PDF Export */
-@media print {
-  :root {
-    /* Optimize for print */
-    --resume-space-section: 18px;
-    --resume-space-item: 12px;
-  }
-
-  @page {
-    size: A4;
-    margin: 0.5in;
-  }
-
-  /* Prevent awkward breaks */
-  .resume-section {
-    page-break-inside: avoid;
-  }
-
-  .resume-item {
-    break-inside: avoid;
-  }
-
-  /* Widows and orphans control */
-  p, li {
-    widows: 3;
-    orphans: 3;
-  }
-
-  /* Hyphenation for long words */
-  .resume-description {
-    hyphens: auto;
-  }
-
-  /* Hide interactive elements */
-  .no-print {
-    display: none !important;
-  }
-}
-
-/* RTL Support */
-[dir="rtl"] {
-  text-align: right;
-}
-
-[dir="rtl"] .resume-item {
-  padding-left: 0;
-  padding-right: var(--resume-space-tight);
-}