:root { /* ------------------------------------------------------------------------ 1. COLOR PRIMITIVES (Portfolio Editorial Base) ------------------------------------------------------------------------ */ --purple-100: #EAE2F8; --purple-200: #CFBCF2; --purple-300: #A081D9; --purple-400: #8662C7; --purple-500: #724BB7; --purple-600: #653CAD; --purple-700: #51279B; --purple-800: #421987; --purple-900: #34126F; --purple-1000: #240754; --warm-grey-100: #FAF9F7; --warm-grey-100-rgb: 250 249 247; --warm-grey-200: #E8E6E1; --warm-grey-300: #D3CEC4; --warm-grey-400: #B8B2A7; --warm-grey-500: #A39E93; --warm-grey-600: #857F72; --warm-grey-700: #625D52; --warm-grey-800: #504A40; --warm-grey-900: #423D33; --warm-grey-1000: #27241D; --warm-grey-1000-rgb: 39 36 29; /* ------------------------------------------------------------------------ 2. WORKSTATION OS DARK SURFACE SCALE & ACCENTS ------------------------------------------------------------------------ */ --charcoal-50: #161410; /* desktop canvas */ --charcoal-100: #1C1A15; /* window / app surface */ --charcoal-150: #211F19; /* header bars, cards inside windows */ --charcoal-200: #2C2820; /* active/pressed dock + toolbar state */ --charcoal-300: #34302A; /* card & structural borders */ --charcoal-400: #3A362E; /* window frame border */ --cyan-500: #54D1DB; /* OS accent: clock, telemetry highlight */ --red-500: #E12D39; /* traffic light: close */ --amber-500: #E9B949; /* traffic light: minimize */ --green-500: #31B237; /* traffic light: zoom / active dot */ /* ------------------------------------------------------------------------ 3. CALLOUT & NOTION ACCENTS ------------------------------------------------------------------------ */ --amber-100: #FFFAEB; /* Notion warning callout bg */ --green-100: #E3F9E5; /* Notion success callout bg */ --color-white: #FFFFFF; --notion-text: #37352F; /* ------------------------------------------------------------------------ 4. TYPOGRAPHY SCALES & FONTS ------------------------------------------------------------------------ */ --font-ui: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Bricolage Grotesque", Georgia, serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --text-3xs: 0.5rem; /* 8px */ --text-2xs: 0.625rem; /* 10px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; --text-8xl: 6rem; --text-9xl: 8rem; --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; --leading-loose: 2; /* ------------------------------------------------------------------------ 5. SPACING SCALE ------------------------------------------------------------------------ */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space1-5xs: 0.375rem; /* 6px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-base: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ --space-5xl: 8rem; /* 128px */ --space-6xl: 12rem; --space-7xl: 16rem; --space-8xl: 24rem; --space-9xl: 32rem; --space-10xl: 40rem; --space-11xl: 48rem; /* ------------------------------------------------------------------------ 6. RADII SCALE ------------------------------------------------------------------------ */ --radius-sm: 0.25rem; /* 4px */ --radius-m: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-round: 999rem; /* ------------------------------------------------------------------------ 7. ELEVATION & SHADOWS ------------------------------------------------------------------------ */ --box-shadow: 0 0 0 1px rgb(39 36 29 / 0.06), 0 1px 2px -1px rgb(39 36 29 / 0.06), 0 2px 4px rgb(39 36 29 / 0.04); --box-shadow-hover: 0 0 0 1px rgb(39 36 29 / 0.08), 0 1px 2px -1px rgb(39 36 29 / 0.08), 0 2px 4px rgb(39 36 29 / 0.06); --box-shadow-bottom: 0 1px rgb(39 36 29 / 0.06), 0 2px 2px -1px rgb(39 36 29 / 0.06), 0 4px 4px -2px rgb(39 36 29 / 0.04); /* ------------------------------------------------------------------------ 8. SEMANTIC ROLES ------------------------------------------------------------------------ */ --color-brand: var(--purple-700); --color-brand-hover: var(--purple-800); --color-brand-subtle: var(--purple-100); --color-brand-solid: var(--purple-900); --color-brand-solid-hover: var(--purple-1000); --color-canvas: rgb(var(--warm-grey-100-rgb) / 0.42); --color-surface: var(--warm-grey-100); --color-surface-raised: #EFEDE8; --color-surface-sunken: rgb(var(--warm-grey-1000-rgb) / 0.035); --color-surface-subtle: rgb(var(--warm-grey-1000-rgb) / 0.024); --color-surface-hover: rgb(var(--warm-grey-1000-rgb) / 0.045); --color-surface-pressed: rgb(var(--warm-grey-1000-rgb) / 0.07); --color-border: rgb(var(--warm-grey-1000-rgb) / 0.10); --color-border-subtle: rgb(var(--warm-grey-1000-rgb) / 0.06); --color-border-strong: rgb(var(--warm-grey-1000-rgb) / 0.16); --color-text-primary: var(--warm-grey-1000); --color-text-secondary: var(--warm-grey-700); --color-text-tertiary: var(--warm-grey-600); --color-text-muted: var(--warm-grey-500); --color-text-faint: var(--warm-grey-400); --color-text-on-solid: var(--warm-grey-100); --color-link: var(--color-brand-solid); --color-link-hover: var(--color-brand-solid-hover); /* ------------------------------------------------------------------------ 8b. NOTES APP — SURFACE & CHROME ROLES Consumed by notes/styles.css. Light-mode values reference primitives above; the [data-theme="dark"] block below remaps them. ------------------------------------------------------------------------ */ --notes-bg: var(--warm-grey-200); /* #E8E6E1 — app canvas */ --notes-surface-sidebar: #EFEDE8; /* folders pane */ --notes-surface-list: #F4F2EC; /* notes list pane */ --notes-surface-detail: var(--warm-grey-100); /* #FAF9F7 — detail pane */ --notes-surface-card: var(--color-white); /* cards, popovers */ --notes-surface-inset: #F0EEE9; /* inset / sunken wells */ --notes-surface-stage: radial-gradient(circle at 50% 30%, #FAF9F7 0%, #F0EEE9 100%); --notes-border: var(--warm-grey-300); /* #D3CEC4 — structural */ --notes-border-subtle: #E8E6E1; /* lighter dividers */ --notes-border-card: #E2DFD6; /* note card bottom */ --notes-active-bg: var(--purple-100); /* #EAE2F8 */ --notes-active-color: var(--purple-1000); /* #240754 */ --notes-active-folder: var(--purple-200); /* #CFBCF2 */ --notes-active-secondary: var(--purple-700); /* #51279B — count on active folder */ --notes-selection-bg: var(--purple-200); /* #CFBCF2 */ --notes-selection-color: var(--purple-1000); /* #240754 */ --notes-scrollbar: var(--warm-grey-300); --notes-scrollbar-hover: var(--warm-grey-400); --notes-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.02); --notes-shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.05); --notes-shadow-popover: 0 10px 28px rgba(39, 36, 29, 0.14); --notes-shadow-resume: 0 2px 10px rgba(39, 36, 29, 0.08); /* ------------------------------------------------------------------------ 9. MOTION & BREAKPOINTS ------------------------------------------------------------------------ */ --motion-fast: 160ms; --motion-base: 260ms; --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --bp-tablet: 760px; --bp-desktop: 1040px; } /* ========================================================================== DARK THEME — remap semantic tokens under [data-theme="dark"] Uses the charcoal surface scale (section 2) and inverted warm-greys. ========================================================================== */ [data-theme="dark"] { /* ---- brand ---- */ --color-brand: var(--purple-300); --color-brand-hover: var(--purple-200); --color-brand-subtle: var(--purple-900); --color-brand-solid: var(--purple-400); --color-brand-solid-hover: var(--purple-300); /* ---- surfaces ---- */ --color-canvas: var(--charcoal-50); --color-surface: var(--charcoal-100); --color-surface-raised: var(--charcoal-150); --color-surface-sunken: rgba(250, 249, 247, 0.03); --color-surface-subtle: rgba(250, 249, 247, 0.02); --color-surface-hover: rgba(250, 249, 247, 0.06); --color-surface-pressed: rgba(250, 249, 247, 0.09); /* ---- borders ---- */ --color-border: rgba(250, 249, 247, 0.10); --color-border-subtle: rgba(250, 249, 247, 0.06); --color-border-strong: rgba(250, 249, 247, 0.16); /* ---- text ---- */ --color-text-primary: var(--warm-grey-100); --color-text-secondary: var(--warm-grey-400); --color-text-tertiary: var(--warm-grey-500); --color-text-muted: var(--warm-grey-600); --color-text-faint: var(--warm-grey-700); --color-text-on-solid: var(--warm-grey-100); /* ---- links ---- */ --color-link: var(--purple-300); --color-link-hover: var(--purple-200); /* ---- shadows ---- */ --box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); --box-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25); /* ---- Notes app surfaces ---- */ --notes-bg: var(--charcoal-50); --notes-surface-sidebar: var(--charcoal-100); --notes-surface-list: var(--charcoal-150); --notes-surface-detail: var(--charcoal-50); --notes-surface-card: var(--charcoal-200); --notes-surface-inset: var(--charcoal-150); --notes-surface-stage: radial-gradient(circle at 50% 30%, var(--charcoal-200) 0%, var(--charcoal-150) 100%); --notes-border: var(--charcoal-300); --notes-border-subtle: var(--charcoal-300); --notes-border-card: var(--charcoal-300); --notes-active-bg: var(--purple-900); --notes-active-color: var(--purple-100); --notes-active-folder: var(--purple-700); --notes-active-secondary: var(--purple-200); --notes-selection-bg: var(--purple-700); --notes-selection-color: var(--purple-100); --notes-scrollbar: var(--charcoal-400); --notes-scrollbar-hover: var(--warm-grey-800); --notes-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.15); --notes-shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.25); --notes-shadow-popover: 0 10px 28px rgba(0, 0, 0, 0.4); --notes-shadow-resume: 0 2px 10px rgba(0, 0, 0, 0.2); }