/* ========================================================================== Sarrai Design System — colors & type foundations Palette anchored on the logo: #3F497F navy + #EB780E orange. Vibe: warm & human, Intercom / Front adjacent. Professional but not sterile. ========================================================================== */ /* ---- Inter (Google Fonts) ---- Sarrai explicitly uses Inter. Loaded from Google Fonts CDN for reliability. Swap to a self-hosted /fonts/Inter-*.woff2 if you need offline / GDPR-stricter. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ========================================================================= BRAND — primary/accent ========================================================================= */ --brand-navy: #3F497F; /* Sarrai wordmark — primary brand */ --brand-navy-600: #384171; /* hover on navy surfaces */ --brand-navy-700: #2F375E; /* press / deeper */ --brand-navy-800: #252B48; /* text on light / deepest */ --brand-navy-300: #8A93BA; /* disabled / tertiary */ --brand-navy-200: #C7CBDD; /* soft outlines / rails */ --brand-navy-100: #E7E9F1; /* soft tinted surfaces */ --brand-navy-50: #F3F4F9; /* lightest tint */ --brand-orange: #EB780E; /* Sarrai accent — CTAs, Lira highlights */ --brand-orange-600: #D26A07; /* hover */ --brand-orange-700: #B25904; /* press */ --brand-orange-300: #F5B06B; /* soft accent */ --brand-orange-200: #FBDDBD; /* badge bg */ --brand-orange-100: #FDEEDB; /* subtle highlight */ --brand-orange-50: #FFF7EF; /* warmest neutral tint */ /* ========================================================================= NEUTRALS — warm gray, slightly tinted toward the navy for coherence ========================================================================= */ --neutral-0: #FFFFFF; --neutral-25: #FBFBFD; /* app bg */ --neutral-50: #F6F7FA; /* subtle fill */ --neutral-100: #EEEFF4; /* dividers-ish fill */ --neutral-200: #E2E4EC; /* borders */ --neutral-300: #CBCED9; /* strong borders */ --neutral-400: #9A9FB0; /* placeholder text */ --neutral-500: #6B7088; /* secondary text */ --neutral-600: #4B5068; /* body text on light */ --neutral-700: #343852; /* strong text */ --neutral-800: #22263C; /* headings */ --neutral-900: #141727; /* maximum contrast */ /* ========================================================================= SEMANTIC — status ========================================================================= */ --success: #1F9D6A; --success-bg: #E4F5ED; --success-fg: #0F6B47; --warning: #D98A0A; --warning-bg: #FDF1DA; --warning-fg: #8A5400; --danger: #D64545; --danger-bg: #FBE5E5; --danger-fg: #902626; --info: #3F72B8; /* tempered navy-adjacent info */ --info-bg: #E4EDF8; --info-fg: #1F4578; /* ========================================================================= SEMANTIC — foreground / background aliases ========================================================================= */ --fg-1: var(--neutral-800); /* primary heading text */ --fg-2: var(--neutral-700); /* body */ --fg-3: var(--neutral-500); /* secondary */ --fg-4: var(--neutral-400); /* tertiary / placeholder */ --fg-on-brand: var(--neutral-0); /* text on navy / orange fills */ --fg-link: var(--brand-navy); --fg-link-hover: var(--brand-navy-700); --bg-app: var(--neutral-25); --bg-surface: var(--neutral-0); --bg-surface-2: var(--neutral-50); /* raised card on app bg */ --bg-sunken: var(--neutral-100); /* inputs / chips */ --bg-brand: var(--brand-navy); --bg-brand-soft: var(--brand-navy-50); --bg-accent-soft: var(--brand-orange-50); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-500); --border-brand: var(--brand-navy); --ring-focus: color-mix(in oklch, var(--brand-navy) 40%, transparent); /* ========================================================================= TYPOGRAPHY — Inter everywhere, JetBrains Mono for code ========================================================================= */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Inter", system-ui, sans-serif; /* same family; role differs */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-black: 800; /* type scale — modest 1.18 ratio, warm not dramatic */ --fs-12: 0.75rem; /* 12 — micro labels / meta */ --fs-13: 0.8125rem; /* 13 — caption */ --fs-14: 0.875rem; /* 14 — body small / dense UI */ --fs-15: 0.9375rem; /* 15 — default UI body */ --fs-16: 1rem; /* 16 — marketing body */ --fs-18: 1.125rem; /* 18 — lead / large body */ --fs-20: 1.25rem; /* 20 — h4 */ --fs-24: 1.5rem; /* 24 — h3 */ --fs-30: 1.875rem; /* 30 — h2 */ --fs-36: 2.25rem; /* 36 — h1 / page title */ --fs-48: 3rem; /* 48 — hero */ --fs-60: 3.75rem; /* 60 — marketing display */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal:1.5; --lh-relaxed:1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.06em; /* for all-caps eyebrow labels */ /* ========================================================================= SPACING — 4px base ========================================================================= */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ========================================================================= RADII — medium-soft; not pill-heavy. Intercom-style cards with 12-16px radius. ========================================================================= */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; /* inputs, small buttons */ --r-lg: 12px; /* buttons, chips */ --r-xl: 16px; /* cards */ --r-2xl: 24px; /* hero cards / large surfaces */ --r-full: 999px; /* avatars, pills */ /* ========================================================================= SHADOWS — soft, warm, low-spread. Navy-tinted rather than pure black. ========================================================================= */ --shadow-xs: 0 1px 2px rgba(37, 43, 72, 0.06); --shadow-sm: 0 1px 2px rgba(37, 43, 72, 0.06), 0 1px 3px rgba(37, 43, 72, 0.08); --shadow-md: 0 4px 10px -2px rgba(37, 43, 72, 0.08), 0 2px 4px -2px rgba(37, 43, 72, 0.06); --shadow-lg: 0 12px 24px -8px rgba(37, 43, 72, 0.14), 0 4px 8px -2px rgba(37, 43, 72, 0.06); --shadow-xl: 0 24px 48px -12px rgba(37, 43, 72, 0.18); --shadow-focus: 0 0 0 4px color-mix(in oklch, var(--brand-navy) 22%, transparent); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* ========================================================================= MOTION — gentle ease-out, no bounces. 160–260ms sweet spot. ========================================================================= */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; /* ========================================================================= LAYOUT — app chrome metrics ========================================================================= */ --app-nav-h: 60px; --app-sidebar-w: 260px; --container-max: 1200px; --reading-max: 68ch; } /* ========================================================================== SEMANTIC RESETS — put these vars to use as global element defaults ========================================================================== */ html { font-family: var(--font-sans); font-size: 16px; color: var(--fg-2); background: var(--bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01", "ss03"; /* Inter's humanist alternates */ } body { margin: 0; line-height: var(--lh-normal); } h1, h2, h3, h4, h5, h6 { color: var(--fg-1); font-family: var(--font-display); margin: 0 0 var(--s-4) 0; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); text-wrap: balance; } h1 { font-size: var(--fs-36); font-weight: var(--fw-bold); } h2 { font-size: var(--fs-30); font-weight: var(--fw-bold); } h3 { font-size: var(--fs-24); font-weight: var(--fw-semibold); } h4 { font-size: var(--fs-20); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } h5 { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } h6 { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); } p { margin: 0 0 var(--s-4) 0; font-size: var(--fs-16); line-height: var(--lh-relaxed); text-wrap: pretty; } small { font-size: var(--fs-13); color: var(--fg-3); } a { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } a:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--bg-sunken); padding: 2px 6px; border-radius: var(--r-sm); color: var(--brand-navy-800); } ::selection { background: var(--brand-orange-200); color: var(--brand-navy-800); } /* Focus ring used across interactive elements */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-md); }