Initial commit: OAuth IAM Laravel application

Laravel-based OAuth/IAM service with Passport, Vue 3 frontend, and
Docker Compose setup for local and production deployment.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

resources/scss/base/_tokens.scss

@@ -0,0 +1,70 @@
+// Tokens de color como custom properties CSS (no variables SCSS): así el
+// toggle de tema (clase .dark en <html>) los puede resolver en runtime sin
+// recompilar nada — SCSS solo aporta el anidado/organización de las reglas.
+:root {
+    --color-page-bg: #f9fafb; // gray-50
+    --color-surface: #ffffff;
+    --color-surface-muted: #f9fafb; // gray-50
+    --color-code-bg: #f3f4f6; // gray-100
+    --color-border: #e5e7eb; // gray-200
+    --color-border-strong: #d1d5db; // gray-300
+
+    --color-text-primary: #111827; // gray-900
+    --color-text-secondary: #6b7280; // gray-500
+    --color-text-muted: #9ca3af; // gray-400
+    --color-text-on-accent: #ffffff;
+
+    --color-accent: #4f46e5; // indigo-600
+    --color-accent-strong: #6366f1; // indigo-500
+    --color-accent-soft: #eef2ff; // indigo-50
+    --color-accent-soft-text: #4338ca; // indigo-700
+    --gradient-accent: linear-gradient(to right, #4f46e5, #7c3aed);
+    --gradient-glow: linear-gradient(to bottom right, rgb(129 140 248 / 30%), rgb(167 139 250 / 20%));
+
+    --color-success: #059669; // emerald-600
+    --color-success-dot: #10b981; // emerald-500
+    --color-danger: #dc2626; // red-600
+
+    --color-warning-border: #fcd34d; // amber-300
+    --color-warning-bg: #fffbeb; // amber-50
+    --color-warning-title: #92400e; // amber-800
+    --color-warning-text: #78350f; // amber-900
+    --color-warning-code-bg: #ffffff;
+
+    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 4%);
+    --shadow-elevated: 0 10px 25px -5px rgb(17 24 39 / 8%), 0 8px 10px -6px rgb(17 24 39 / 5%);
+}
+
+.dark {
+    --color-page-bg: #09090b; // zinc-950
+    --color-surface: #18181b; // zinc-900
+    --color-surface-muted: rgb(255 255 255 / 5%);
+    --color-code-bg: rgb(255 255 255 / 10%);
+    --color-border: rgb(255 255 255 / 10%);
+    --color-border-strong: rgb(255 255 255 / 15%);
+
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #9ca3af; // gray-400
+    --color-text-muted: #6b7280; // gray-500
+    --color-text-on-accent: #ffffff;
+
+    --color-accent: #6366f1; // indigo-500
+    --color-accent-strong: #818cf8; // indigo-400
+    --color-accent-soft: rgb(99 102 241 / 15%);
+    --color-accent-soft-text: #a5b4fc; // indigo-300
+    --gradient-accent: linear-gradient(to right, #4f46e5, #7c3aed);
+    --gradient-glow: linear-gradient(to bottom right, rgb(99 102 241 / 20%), rgb(139 92 246 / 10%));
+
+    --color-success: #34d399; // emerald-400
+    --color-success-dot: #10b981;
+    --color-danger: #f87171; // red-400
+
+    --color-warning-border: rgb(245 158 11 / 30%);
+    --color-warning-bg: rgb(245 158 11 / 10%);
+    --color-warning-title: #fcd34d; // amber-300
+    --color-warning-text: #fde68a; // amber-200
+    --color-warning-code-bg: rgb(0 0 0 / 20%);
+
+    --shadow-card: none;
+    --shadow-elevated: 0 20px 25px -5px rgb(0 0 0 / 30%), 0 8px 10px -6px rgb(0 0 0 / 30%);
+}