/* Font definitions */ @font-face { font-family: 'Literata'; src: url('/fonts/Literata/Literata-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; /* Variable font supports full range; adjust based on your font's capabilities */ font-style: normal; } @font-face { font-family: 'Literata'; src: url('/fonts/Literata/Literata-Italic-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; /* Variable font supports full range */ font-style: italic; } /* Static fallbacks or additional weights if needed (optional, but useful for browsers with poor variable font support) */ @font-face { font-family: 'Literata'; src: url('/fonts/Literata/static/Literata-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Literata'; src: url('/fonts/Literata/static/Literata-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Literata'; src: url('/fonts/Literata/static/Literata-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Literata'; src: url('/fonts/Literata/static/Literata-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } /* Similar for Oswald - assuming similar structure */ @font-face { font-family: 'Oswald'; src: url('/fonts/Oswald/Oswald-VariableFont_wght.ttf') format('truetype'); /* Adjust if exact file name differs */ font-weight: 100 900; font-style: normal; } /* Static for Oswald if available */ @font-face { font-family: 'Oswald'; src: url('/fonts/Oswald/static/Oswald-ExtraLight.ttf') format('truetype'); /* Adjust names as per your files */ font-weight: 200; font-style: normal; } @font-face { font-family: 'Oswald'; src: url('/fonts/Oswald/static/Oswald-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Oswald'; src: url('/fonts/Oswald/static/Oswald-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Oswald'; src: url('/fonts/Oswald/static/Oswald-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } /* =========================== Global Theme Tokens Apply a theme by setting: =========================== */ /* Default (fallback) – dark */ :root { /* brand */ --color-accent: #e67e00; /* surfaces & text */ --color-bg: #0b0b0b; --color-surface: #151515; --color-text: #eaeaea; --color-muted: #9aa0a6; --color-border: #242424; /* elevations */ --shadow-1: 0 8px 24px rgba(0,0,0,.35); --shadow-2: 0 10px 28px rgba(0,0,0,.45); /* layout */ --content-max: 900px; --gap: 16px; --radius: 6px; /* typography */ --font-body: 'Literata', serif; --font-heading: 'Oswald', sans-serif; /* pill colors */ --color-category-pill-bg: #1b1b1b; --color-keyword-pill-bg: #252525; --color-category-pill-hover-bg: #252525; --color-keyword-pill-hover-bg: #303030; --color-pill-text: #9aa0a6; } /* Prefer system setting on first load if no saved theme */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg: #f7f8fa; --color-surface: #ffffff; --color-text: #111111; --color-muted: #555a60; --color-border: #e5e7eb; --shadow-1: 0 8px 24px rgba(0,0,0,.12); --shadow-2: 0 12px 36px rgba(0,0,0,.18); /* pill colors */ --color-category-pill-bg: #f3f5f8; --color-keyword-pill-bg: #e8ebee; --color-category-pill-hover-bg: #e8ebee; --color-keyword-pill-hover-bg: #dde1e5; --color-pill-text: #555a60; } } /* Explicit Themes */ :root[data-theme="light"] { --color-bg: #f7f8fa; --color-surface: #ffffff; --color-text: #111111; --color-muted: #555a60; --color-border: #e5e7eb; --shadow-1: 0 8px 24px rgba(0,0,0,.12); --shadow-2: 0 12px 36px rgba(0,0,0,.18); /* pill colors */ --color-category-pill-bg: #f3f5f8; --color-keyword-pill-bg: #e8ebee; --color-category-pill-hover-bg: #e8ebee; --color-keyword-pill-hover-bg: #dde1e5; --color-pill-text: #555a60; } :root[data-theme="dark"] { --color-bg: #5b5b5b; --color-surface: #151515; --color-text: #eaeaea; --color-muted: #9aa0a6; --color-border: #242424; --shadow-1: 0 8px 24px rgba(0,0,0,.35); --shadow-2: 0 10px 28px rgba(0,0,0,.45); /* pill colors */ --color-category-pill-bg: #1b1b1b; --color-keyword-pill-bg: #252525; --color-category-pill-hover-bg: #252525; --color-keyword-pill-hover-bg: #303030; --color-pill-text: #9aa0a6; } /* "Modern" – deep slate with crisp text, same accent */ :root[data-theme="modern"] { --color-bg: #0f1320; /* deep slate/indigo */ --color-surface: #141a2a; /* slightly lighter surface */ --color-text: #e6edf3; /* soft white-blue */ --color-muted: #9aa6b2; /* cool muted */ --color-border: #273248; /* cool border */ --shadow-1: 0 8px 24px rgba(5,10,20,.45); --shadow-2: 0 12px 36px rgba(5,10,20,.55); /* pill colors */ --color-category-pill-bg: #1a2238; --color-keyword-pill-bg: #222b45; --color-category-pill-hover-bg: #222b45; --color-keyword-pill-hover-bg: #2a3350; --color-pill-text: #9aa6b2; } /* Utility tokens commonly used in components */ :root { --btn-bg-ghost: transparent; --btn-bg-muted: #1a1a1a; /* overridden by theme feel */ --chip-bg: #1b1b1b; --chip-border: var(--color-border); } :root[data-theme="light"] { --btn-bg-muted: #f0f2f5; --chip-bg: #f3f5f8; } :root[data-theme="modern"] { --btn-bg-muted: #182036; --chip-bg: #1a2238; } /* Global typography */ body { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }