105 lines
2.8 KiB
CSS
105 lines
2.8 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* FiberOps Design System — Pixel/Conan approved */
|
|
/* Primary: #0891B2 | CTA: #059669 | BG: #F8FAFC | Text: #0F172A */
|
|
/* Fonts: Fira Sans (body) + Fira Code (data/numbers) */
|
|
|
|
@layer base {
|
|
:root {
|
|
/* FiberOps tokens */
|
|
--color-primary: #0891B2;
|
|
--color-primary-dark: #0E7490;
|
|
--color-secondary: #22D3EE;
|
|
--color-cta: #059669;
|
|
--color-cta-hover: #047857;
|
|
--color-bg: #F8FAFC;
|
|
--color-surface: #FFFFFF;
|
|
--color-text: #0F172A;
|
|
--color-muted: #64748B;
|
|
--color-border: #E2E8F0;
|
|
--color-danger: #EF4444;
|
|
--color-warning: #F59E0B;
|
|
--color-success: #059669;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
|
--shadow-md: 0 4px 6px rgba(0,0,0,0.07);
|
|
--shadow-lg: 0 10px 15px rgba(0,0,0,0.08);
|
|
--shadow-xl: 0 20px 25px rgba(0,0,0,0.12);
|
|
|
|
/* Radius */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 20px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: 'Fira Sans', 'Inter', system-ui, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Data values, numbers, IDs */
|
|
code, .font-mono, .tabular-nums {
|
|
font-family: 'Fira Code', 'JetBrains Mono', monospace;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Skeleton loading animation */
|
|
.skeleton {
|
|
@apply animate-pulse bg-slate-200 rounded;
|
|
}
|
|
|
|
/* Row hover for tables */
|
|
.table-row-hover:hover {
|
|
background-color: #F0FDFF;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Transition helper */
|
|
.transition-fast {
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.transition-smooth {
|
|
transition: all 200ms ease;
|
|
}
|
|
|
|
/* Card base */
|
|
.fiberops-card {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Status badge helpers */
|
|
.badge-active { background: #DCFCE7; color: #166534; }
|
|
.badge-inactive { background: #F1F5F9; color: #475569; }
|
|
.badge-suspended { background: #FEF3C7; color: #92400E; }
|
|
.badge-pending { background: #DBEAFE; color: #1E40AF; }
|
|
.badge-overdue { background: #FEE2E2; color: #991B1B; }
|
|
.badge-paid { background: #DCFCE7; color: #166534; }
|
|
.badge-partial { background: #FEF3C7; color: #92400E; }
|
|
.badge-void { background: #F1F5F9; color: #94A3B8; }
|
|
.badge-open { background: #DBEAFE; color: #1E40AF; }
|
|
.badge-in-progress { background: #FEF3C7; color: #92400E; }
|
|
.badge-resolved { background: #DCFCE7; color: #166534; }
|
|
.badge-closed { background: #F1F5F9; color: #475569; }
|
|
|
|
.text-balance { text-wrap: balance; }
|
|
}
|