@import "tailwindcss"; /* ─── Anwal Growth Platform — Design System ─── */ :root { /* --font-arabic and --font-inter are set by next/font on */ --font-family-arabic: var(--font-arabic), "Noto Kufi Arabic", sans-serif; --font-family-english: var(--font-inter), "Inter", sans-serif; --background: #f0f6f9; --foreground: #0c1929; --surface: #ffffff; --card: #ffffff; --card-foreground: #0c1929; --muted: #e4eef3; --muted-foreground: #5a7189; --border: #d4e2ea; --primary: #0d5c6d; --primary-foreground: #f0fdfa; --secondary: #1a7a8c; --secondary-foreground: #ffffff; --accent: #14b8a6; --accent-foreground: #042f2e; --destructive: #dc2626; --destructive-foreground: #ffffff; --ring: #14b8a6; --radius: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --shadow-sm: 0 1px 3px rgb(13 92 109 / 0.06); --shadow: 0 4px 20px rgb(13 92 109 / 0.08); --shadow-lg: 0 12px 40px rgb(13 92 109 / 0.1); --gradient-brand: linear-gradient(135deg, #0d5c6d 0%, #1a7a8c 45%, #14b8a6 100%); --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f0f6f9 100%); --gradient-hero: linear-gradient(145deg, #063a47 0%, #0a4a58 40%, #0d5c6d 100%); --sidebar-width: 18rem; --sidebar-collapsed: 4.75rem; --topbar-height: 4rem; --content-max: 90rem; } .dark { --background: #071018; --foreground: #f8fafc; --surface: #0b1722; --card: #0f1d2b; --card-foreground: #f8fafc; --muted: #0b1722; --muted-foreground: #94a3b8; --border: #173247; --primary: #0ea5a4; --primary-foreground: #042f2e; --secondary: #14b8a6; --secondary-foreground: #042f2e; --accent: #14b8a6; --accent-foreground: #ecfdf5; --destructive: #f87171; --destructive-foreground: #450a0a; --ring: #14b8a6; --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.35); --shadow: 0 4px 24px rgb(0 0 0 / 0.4); --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.5); --gradient-brand: linear-gradient(135deg, #0ea5a4 0%, #14b8a6 50%, #2dd4bf 100%); --gradient-surface: linear-gradient(180deg, #0f1d2b 0%, #071018 100%); --gradient-hero: linear-gradient(145deg, #042f2e 0%, #063a47 50%, #0a4a58 100%); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-surface: var(--surface); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-border: var(--border); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --font-sans: var(--font-family-arabic); } /* Global typography — Arabic / English */ html { scroll-behavior: smooth; } html[dir="rtl"], html[dir="rtl"] body, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select, html[dir="rtl"] table, html[dir="rtl"] th, html[dir="rtl"] td, html[dir="rtl"] label, html[dir="rtl"] a, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] p, html[dir="rtl"] span, html[dir="rtl"] li { font-family: var(--font-family-arabic); } html[dir="ltr"], html[dir="ltr"] body, html[dir="ltr"] button, html[dir="ltr"] input, html[dir="ltr"] textarea, html[dir="ltr"] select, html[dir="ltr"] table, html[dir="ltr"] th, html[dir="ltr"] td, html[dir="ltr"] label { font-family: var(--font-family-english); } body { background: var(--background); color: var(--foreground); font-family: inherit; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Inherit font into components */ button, input, textarea, select, option, table, dialog, [role="dialog"], [role="menu"], [role="listbox"], .card, .badge, nav, header, aside, footer, main { font-family: inherit; } .text-display { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .text-title { font-size: 1.5rem; font-weight: 600; line-height: 1.3; } .text-subtitle { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.5; } .surface-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .surface-elevated { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); } .surface-glass { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--border); } .text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-fade-in { animation: fade-in 0.35s ease-out forwards; } .animate-shimmer { background: linear-gradient( 90deg, var(--muted) 0%, color-mix(in srgb, var(--muted) 60%, var(--card)) 50%, var(--muted) 100% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } [dir="rtl"] table th, [dir="rtl"] table td { text-align: right; } [dir="ltr"] table th, [dir="ltr"] table td { text-align: left; } /* Sticky table header */ .data-table-scroll { max-height: min(70vh, 720px); overflow: auto; } .data-table-scroll thead th { position: sticky; top: 0; z-index: 10; background: var(--muted); box-shadow: 0 1px 0 var(--border); } /* TipTap email editor */ .tiptap { outline: none; } .tiptap h2 { font-size: 1.25rem; font-weight: 700; margin: 0.75rem 0 0.5rem; } .tiptap p { margin: 0.5rem 0; } .tiptap ul, .tiptap ol { padding-inline-start: 1.5rem; margin: 0.5rem 0; } .tiptap a { color: var(--primary); text-decoration: underline; } .tiptap hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; } /* Inbox email message viewer */ .email-message-body .email-body-content, .email-message-body .email-quoted-content { line-height: 1.65; word-break: break-word; } .email-message-body .email-paragraph { margin: 0 0 0.75rem; } .email-message-body .email-quoted-content .email-paragraph { margin-bottom: 0.5rem; } .email-message-body a { color: var(--primary); text-decoration: underline; } .email-message-body img { max-width: 100%; height: auto; border-radius: 0.375rem; }