@import "tailwindcss"; /* Class-based dark mode: add/remove `.dark` on to flip the token set. */ @custom-variant dark (&:where(.dark, .dark *)); /** * Kapitano brand tokens. * * Derived from the Kapitano brand mockups (WEB BRAND COLORING): the deep indigo * `#1B1255` is the brand primary used across headers, footers and actions, paired * with the Kapitano red `#FE0000` kept for identity accents and urgency. */ :root { color-scheme: light; --background: #f6f5fb; --foreground: #181626; --surface: #ffffff; --surface-muted: #f1f0f8; --primary: #1b1255; --primary-dark: #120e3c; --primary-hover: #27186b; --primary-soft: #edeafa; --primary-foreground: #ffffff; --accent: #fe0000; --accent-soft: #ffe9e9; --accent-foreground: #ffffff; --muted: #f3f2f9; --muted-foreground: #6a6680; --border: #e7e4f2; --input: #ddd9ee; --ring: #1b1255; --success: #17833e; --success-soft: #e6f6ec; --warning: #b45309; --warning-soft: #fdf4e3; --danger: #d92d20; --danger-soft: #fcebea; --radius: 0.5rem; } /** * Dark theme. Every component reads colors from the variables below, so flipping * `.dark` on restyles the whole app. Brand indigo lightens for dark * surfaces (light-on-dark legibility), status colors keep WCAG AA contrast. */ .dark { color-scheme: dark; --background: #0e0b1e; --foreground: #eceaf6; --surface: #17132c; --surface-muted: #201b3a; --primary: #8b93ef; --primary-dark: #565db8; --primary-hover: #a2a8f4; --primary-soft: #262146; --primary-foreground: #120e35; --accent: #ff6f6c; --accent-soft: #3a1a1e; --accent-foreground: #2a0605; --muted: #221d3e; --muted-foreground: #a29bbd; --border: #2b2547; --input: #342c58; --ring: #8b93ef; --success: #249c5f; --success-soft: #122618; --warning: #f0b043; --warning-soft: #322609; --danger: #e5484d; --danger-soft: #3a1418; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-surface: var(--surface); --color-surface-muted: var(--surface-muted); --color-primary: var(--primary); --color-primary-dark: var(--primary-dark); --color-primary-hover: var(--primary-hover); --color-primary-soft: var(--primary-soft); --color-primary-foreground: var(--primary-foreground); --color-accent: var(--accent); --color-accent-soft: var(--accent-soft); --color-accent-foreground: var(--accent-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-success: var(--success); --color-success-soft: var(--success-soft); --color-warning: var(--warning); --color-warning-soft: var(--warning-soft); --color-destructive: var(--danger); --color-destructive-soft: var(--danger-soft); --font-sans: var(--font-kapitano), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", Tahoma, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); } /* Branded page-transition loader (GPU-friendly: transform/opacity only). */ @keyframes kap-loader-ring-spin { to { transform: rotate(360deg); } } @keyframes kap-loader-ring-drift { to { transform: rotate(-360deg); } } @keyframes kap-loader-logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @keyframes kap-loader-shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } } @keyframes kap-loader-in { 0% { opacity: 0; transform: scale(0.985); } 100% { opacity: 1; transform: scale(1); } } @keyframes kap-loader-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.015); } } @layer base { * { border-color: var(--border); } html { height: 100%; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background-color: var(--primary-soft); color: var(--primary); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Subtle scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 8px; } /* Numbers should stay LTR even inside RTL layouts */ .numeric { direction: ltr; unicode-bidi: embed; } }