design: sistema visual de marca (Midnight/Orange, Canela, shell oscuro)

src/app/globals.css

@@ -2,14 +2,52 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ---------------------------------------------------------------------------
+   Tipografía de marca.
+   Canela (titulares y cifras) y FH Oscar (texto) son fuentes comerciales:
+   coloca los .woff2 en /public/fonts y se activan solos. Mientras tanto se
+   usan Instrument Serif y Geist, cargadas en layout.tsx.
+--------------------------------------------------------------------------- */
+@font-face {
+  font-family: 'Canela';
+  src: url('/fonts/Canela-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'FH Oscar';
+  src: url('/fonts/FHOscar-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'FH Oscar';
+  src: url('/fonts/FHOscar-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
-  --background: #ffffff;
-  --foreground: #111827;
+  --font-sans: 'FH Oscar', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-display: 'Canela', 'Instrument Serif', Georgia, serif;
+
+  /* Marca */
+  --midnight: #07101e;
+  --orange: #ff5d00;
+  --mint: #f0fcf0;
+  --mist: #b1c3cd;
+
+  /* Roles */
+  --background: #f6f8f7;      /* lienzo, ligeramente frío */
   --card: #ffffff;
-  --sidebar: #ffffff;
-  --border: #e5e7eb;
-  --brand: #e58a3c;
-  --muted: #6b7280;
+  --sidebar: var(--midnight);
+  --border: #dce4e8;
+  --brand: var(--orange);
+  --foreground: var(--midnight);
+  --muted: #5b6b78;           /* secundario teñido, no gris plano */
 }
 
 html {
@@ -19,18 +57,47 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-sans);
+  font-feature-settings: 'ss01', 'cv11';
   min-height: 100vh;
+  text-rendering: optimizeLegibility;
+}
+
+/* Trama de puntos del brandbook, apenas perceptible, sobre el lienzo */
+.canvas-dots {
+  background-image: radial-gradient(rgba(7, 16, 30, 0.07) 1px, transparent 1px);
+  background-size: 22px 22px;
+  background-position: 0 0;
+}
+
+/* Cifras y titulares en Canela */
+.display {
+  font-family: var(--font-display);
+  font-weight: 500;
+  letter-spacing: -0.01em;
 }
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: #d1d5db transparent;
+  scrollbar-color: var(--mist) transparent;
 }
 
 ::selection {
-  background: rgba(229, 138, 60, 0.25);
-  color: #111827;
+  background: rgba(255, 93, 0, 0.22);
+  color: var(--midnight);
+}
+
+:focus-visible {
+  outline: 2px solid var(--orange);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 
 @layer utilities {
@@ -43,20 +110,20 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type=
 select,
 textarea {
   color-scheme: light !important;
-  color: #111827;
+  color: var(--midnight);
 }
 
 /* Evitar que el autofill del navegador pinte campos en oscuro */
 input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus, 
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
-  -webkit-text-fill-color: #111827 !important;
+  -webkit-text-fill-color: var(--midnight) !important;
   -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
   transition: background-color 5000s ease-in-out 0s;
 }

src/app/layout.tsx

@@ -25,11 +25,11 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300..900;1,300..900&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Geist:wght@400;500;600&display=swap"
           rel="stylesheet"
         />
       </head>
-      <body className="bg-background text-gray-900 min-h-screen antialiased">
+      <body className="bg-background text-ink min-h-screen antialiased">
         {children}
       </body>
     </html>