style(theme): align light and dark palettes with Dreamcoder OS tokens

README.md

@@ -33,7 +33,7 @@ DreamFolio es el portafolio público de Dreamcoder08: una superficie de evidenci
 ## Características
 
 - **Arquitectura 100% estática** — Astro genera HTML puro; el sitio no envía JavaScript de framework al navegador.
-- **Tema dual claro/oscuro** — tokens definidos en `src/styles/global.css`, oscuro por defecto (superficie `#000000` pura con capas `#0d0d10` / `#17171c` y acento `#ff7a18`) con overrides `[data-theme="light"]` (`#f3eadc` / `#8a4e26`). El modo oscuro respeta `prefers-contrast: more`.
+- **Tema dual claro/oscuro** — tokens definidos en `src/styles/global.css`, oscuro por defecto (superficie `#000000` pura con capas `#0b0b0b` / `#0d0d0f` y acento `#a5b4fc`) con overrides `[data-theme="light"]` (`#f3eadc` / `#824f16`). El modo oscuro respeta `prefers-contrast: more`.
 - **Cobertura e2e con Playwright** — specs en `tests/` para home, listado de proyectos y detalle de proyecto (Page Object Model), corridos en CI.
 - **Tipografías autohospedadas** — Inter y JetBrains Mono variables (subset latin) servidas desde `/fonts/`. Ninguna visita contacta a Google Fonts.
 - **Contacto directo por WhatsApp** — botón flotante en todas las páginas, CTA principal en la sección de contacto y comando en la consola ⌘K, todos enlaces `wa.me` sin widget de terceros. El número vive en `siteConfig.contact.whatsapp` (`src/lib/site.ts`).

src/styles/global/01-theme-tokens.css

@@ -4,24 +4,25 @@
    ============================================ */
 
 @theme {
-  /* ---- SURFACES ---- */
+  /* ---- SURFACES (Dreamcoder Dark: OLED canvas, surface0-3 tiers) ---- */
   --color-surface: #000000;
-  --color-surface-alt: #0d0d10;
-  --color-surface-elevated: #17171c;
-  --color-surface-hover: #1e1e24;
-  --color-surface-active: #26262e;
+  --color-surface-alt: #0b0b0b;
+  --color-surface-elevated: #0d0d0f;
+  --color-surface-hover: #1f1f1f;
+  --color-surface-active: #2e2e2e;
 
-  /* ---- TEXT ---- */
-  --color-text: #ededeb;
+  /* ---- TEXT (Dreamcoder Dark text; secondary/tertiary keep the repo's
+     legibility-tuned ramp, which the press state contract needs) ---- */
+  --color-text: #e6e6e6;
   --color-text-secondary: #b7b8b3;
   --color-text-tertiary: #96978f;
 
-  /* ---- ACCENTS ---- */
-  --color-accent: #ff7a18;
-  --color-accent-muted: rgba(255, 122, 24, 0.08);
-  --color-accent-hover: #ff8f42;
-  --color-accent-active: #ffa25e;
-  --color-on-accent: #0a0a0a;
+  /* ---- ACCENTS (Dreamcoder Dark: indigo accent, violet secondary) ---- */
+  --color-accent: #a5b4fc;
+  --color-accent-muted: rgba(165, 180, 252, 0.12);
+  --color-accent-hover: #d4b5fd;
+  --color-accent-active: #ddd6fe;
+  --color-on-accent: #000000;
 
   /* ---- BORDERS ---- */
   --color-border: rgba(255, 255, 255, 0.16);
@@ -30,12 +31,12 @@
   --color-border-interactive-hover: rgba(255, 255, 255, 0.56);
 
   /* ---- FOCUS (aliases --color-accent / --color-on-accent by value) ---- */
-  --color-focus: #ff7a18;
-  --color-on-focus: #0a0a0a;
+  --color-focus: #a5b4fc;
+  --color-on-focus: #000000;
 
   /* ---- SEMANTIC ---- */
-  --color-danger: #ff6b6b;
-  --color-on-danger: #0a0a0a;
+  --color-danger: #fb8585;
+  --color-on-danger: #000000;
 
   /* ---- TYPOGRAPHY ---- */
   --font-sans: "Inter", system-ui, sans-serif;

src/styles/global/02-theme-modes.css

@@ -8,18 +8,18 @@
   --color-text: #17120d;
   --color-text-secondary: #6b5947;
   --color-text-tertiary: #746555;
-  --color-accent: #8a4e26;
-  --color-accent-muted: rgba(138, 78, 38, 0.1);
-  --color-accent-hover: #7a4522;
-  --color-accent-active: #6b3c1c;
+  --color-accent: #824f16;
+  --color-accent-muted: rgba(130, 79, 22, 0.1);
+  --color-accent-hover: #6f4211;
+  --color-accent-active: #5f380e;
   --color-on-accent: #fff7ea;
   --color-border: rgba(0, 0, 0, 0.1);
   --color-border-strong: rgba(0, 0, 0, 0.22);
   --color-border-interactive: rgba(0, 0, 0, 0.18);
   --color-border-interactive-hover: rgba(0, 0, 0, 0.3);
-  --color-focus: #8a4e26;
+  --color-focus: #824f16;
   --color-on-focus: #fff7ea;
-  --color-danger: #b3261e;
+  --color-danger: #842f24;
   --color-on-danger: #fff7ea;
 }
 

src/styles/portfolio/18-interaction-states.css

@@ -28,7 +28,7 @@
   border-color: var(--color-border-interactive-hover);
 }
 /* `.contact-section .solid-link` rests at --color-surface on --color-text =
-   17.91:1, the palette ceiling. No state can exceed it and any fill swap must
+   16.83:1, the palette ceiling. No state can exceed it and any fill swap must
    lower it, so per the design's own rule for max-brightness elements this variant
    signals through geometry rather than colour, and keeps its contrast. */
 .contact-section .solid-link:hover {
@@ -39,8 +39,8 @@
 }
 /* Max-brightness elements must not swap their fill on hover. `.desktop-nav
    .nav-contact` and `.circle-link` rest on `--color-text` over the canvas —
-   17.91:1 dark, 17.49:1 light on a card — and the accent pill their own hover
-   rules applied flipped the ink and dropped the label to 6.17:1 light, below its
+   16.83:1 dark, 17.49:1 light on a card — and the accent pill their own hover
+   rules applied flipped the ink and dropped the label to 6.41:1 light, below its
    own at-rest ratio. The design's rule for these states is to signal through
    border and motion rather than colour, and the icon translate plus the `:active`
    transform already do that. Restating the rest colour keeps the ratio identical
@@ -69,8 +69,8 @@
   color: var(--color-text);
   background: var(--color-surface-active);
 }
-/* The ordinary `.solid-link` press passes on its own terms (rest 7.59:1 ->
-   press 9.98:1), so it keeps the accent fill. */
+/* The ordinary `.solid-link` press passes on its own terms (rest 10.53:1 ->
+   press 15.12:1), so it keeps the accent fill. */
 .solid-link:active {
   background: var(--color-accent-active);
   color: var(--color-on-accent);