/* ============================================================ Orizon — Colors & Type ------------------------------------------------------------ Mobile-first design tokens for the Orizon church member app. "Vivo e companheiro do cristão" — alive and companion. Naming: - `--orz-*` raw brand tokens (don't bind to UI semantics) - `--bg-*` surface tokens - `--fg-*` foreground / text tokens - `--accent-*` signature accent (lime) - `--stroke-*` borders - `--radius-*` corner radii - `--shadow-*` elevation ============================================================ */ /* ---------- Fonts ---------- Load via Google Fonts in your HTML : For offline / production builds, drop the woff2 files into ./fonts/ and uncomment the @font-face rules below. --------------------------------------------------------- */ /* @font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/Urbanist-Variable.woff2") format("woff2-variations"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/Archivo-Variable.woff2") format("woff2-variations"); } */ /* ============================================================ RAW BRAND TOKENS These are the literal colors from the brand board. Do not reference them directly in components — use semantic tokens. ============================================================ */ :root { /* Deep blues — the "night before sunrise" */ --orz-navy-950: #0B1638; /* deepest, near-black navy (derived) */ --orz-navy-900: #172554; /* primary background */ --orz-navy-800: #1E3A8A; /* surface raise / cards on dark */ --orz-blue-600: #3B5CCC; /* mid-blue, links, secondary actions */ --orz-blue-500: #1435F4; /* electric royal blue — primary CTA */ /* Light side — daylight, parchment */ --orz-sand-200: #C4BE9F; /* warm beige — parchment, scripture surfaces */ --orz-sand-100: #EFEBDA; /* lifted parchment (derived) */ --orz-cream: #F7F4EA; /* soft page background (derived) */ /* Signal */ --orz-lime: #CCFF00; /* signature accent — "the light" */ --orz-lime-soft: #E4FF74; /* hover / pressed (derived) */ /* Neutrals */ --orz-ink: #212223; /* near-black ink */ --orz-ink-700: #3A3B3D; /* (derived) */ --orz-ink-500: #6B6D70; /* (derived) */ --orz-ink-300: #B5B6B8; /* (derived) */ --orz-ink-100: #E7E7E5; /* (derived) */ --orz-white: #FFFFFF; /* Semantic */ --orz-success: #22C55E; --orz-warning: #F59E0B; --orz-danger: #FF3B30; } /* ============================================================ SEMANTIC TOKENS — LIGHT (default) The "morning" mode — daylight, parchment-cream, ink type. ============================================================ */ :root, [data-theme="light"] { --bg-app: var(--orz-cream); --bg-surface: #FFFFFF; --bg-raised: #FFFFFF; --bg-sunken: #F0ECDD; --bg-scripture: var(--orz-sand-100); /* parchment for Bible reading */ --bg-inverse: var(--orz-navy-900); --fg-primary: var(--orz-ink); --fg-secondary: var(--orz-ink-500); --fg-tertiary: #8A8B8E; --fg-on-accent: var(--orz-ink); /* lime + ink = high contrast */ --fg-on-brand: var(--orz-white); --fg-on-inverse: var(--orz-white); --fg-link: var(--orz-blue-500); --accent: var(--orz-lime); --accent-hover: var(--orz-lime-soft); --brand: var(--orz-blue-500); --brand-deep: var(--orz-navy-900); --stroke-soft: rgba(33, 34, 35, 0.08); --stroke: rgba(33, 34, 35, 0.14); --stroke-strong: rgba(33, 34, 35, 0.28); --stroke-focus: var(--orz-blue-500); --shadow-1: 0 1px 2px rgba(11, 22, 56, 0.06), 0 1px 1px rgba(11, 22, 56, 0.04); --shadow-2: 0 4px 12px rgba(11, 22, 56, 0.08), 0 2px 4px rgba(11, 22, 56, 0.04); --shadow-3: 0 12px 32px rgba(11, 22, 56, 0.12), 0 4px 8px rgba(11, 22, 56, 0.06); --shadow-pop: 0 24px 56px rgba(11, 22, 56, 0.22); } /* ============================================================ SEMANTIC TOKENS — DARK ("night vigil") The "before sunrise" mode — navy ground, lime accents. ============================================================ */ [data-theme="dark"] { --bg-app: var(--orz-navy-900); --bg-surface: #1B2C5E; /* navy-800 lifted */ --bg-raised: #233670; --bg-sunken: #0E1A40; --bg-scripture: #1B2C5E; --bg-inverse: var(--orz-cream); --fg-primary: #F2F1EA; --fg-secondary: #B8C0DA; --fg-tertiary: #7E89AC; --fg-on-accent: var(--orz-ink); --fg-on-brand: var(--orz-white); --fg-on-inverse: var(--orz-ink); --fg-link: var(--orz-lime); --stroke-soft: rgba(255, 255, 255, 0.06); --stroke: rgba(255, 255, 255, 0.12); --stroke-strong: rgba(255, 255, 255, 0.22); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.40); --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.48); --shadow-pop: 0 24px 56px rgba(0, 0, 0, 0.6); } /* ============================================================ SPACING — 4px base, mobile-first ============================================================ */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Radii */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; /* default card / input */ --radius-lg: 20px; /* hero cards, bottom sheets */ --radius-xl: 28px; --radius-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; } /* ============================================================ TYPOGRAPHY — mobile scale Urbanist for everything; weights 400 / 500 / 600 / 700 / 800 Tracking is tight on display, loose on micro labels. ============================================================ */ :root { --font-sans: "Urbanist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Urbanist", "Archivo", system-ui, sans-serif; --font-brand: "Archivo", "Urbanist", system-ui, sans-serif; /* logo / brand moments */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Scale (mobile-app appropriate; lift sizes ~10–15% for tablet) */ --t-display-2xl: 700 44px/1.04 var(--font-display); /* hero verse */ --t-display-xl: 700 36px/1.06 var(--font-display); --t-display-lg: 700 28px/1.10 var(--font-display); --t-h1: 700 24px/1.16 var(--font-sans); --t-h2: 700 20px/1.20 var(--font-sans); --t-h3: 600 17px/1.28 var(--font-sans); --t-h4: 600 15px/1.32 var(--font-sans); --t-body-lg: 500 17px/1.50 var(--font-sans); --t-body: 400 15px/1.52 var(--font-sans); /* default */ --t-body-sm: 400 13px/1.48 var(--font-sans); --t-caption: 500 12px/1.40 var(--font-sans); --t-overline: 700 11px/1.20 var(--font-sans); --t-button: 600 15px/1.20 var(--font-sans); --t-button-sm: 600 13px/1.20 var(--font-sans); --t-scripture: 500 18px/1.60 var(--font-display); /* Bible reader */ } /* ============================================================ ELEMENT DEFAULTS ============================================================ */ html, body { background: var(--bg-app); color: var(--fg-primary); font: var(--t-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: var(--t-h1); margin: 0; letter-spacing: -0.01em; } h2 { font: var(--t-h2); margin: 0; letter-spacing: -0.005em; } h3 { font: var(--t-h3); margin: 0; } h4 { font: var(--t-h4); margin: 0; } p { font: var(--t-body); margin: 0; } small { font: var(--t-body-sm); color: var(--fg-secondary); } .t-display-2xl { font: var(--t-display-2xl); letter-spacing: -0.02em; } .t-display-xl { font: var(--t-display-xl); letter-spacing: -0.02em; } .t-display-lg { font: var(--t-display-lg); letter-spacing: -0.015em; } .t-h1 { font: var(--t-h1); } .t-h2 { font: var(--t-h2); } .t-h3 { font: var(--t-h3); } .t-h4 { font: var(--t-h4); } .t-body-lg { font: var(--t-body-lg); } .t-body { font: var(--t-body); } .t-body-sm { font: var(--t-body-sm); color: var(--fg-secondary); } .t-caption { font: var(--t-caption); color: var(--fg-secondary); } .t-overline { font: var(--t-overline); text-transform: uppercase; letter-spacing: 0.10em; color: var(--fg-secondary); } .t-scripture { font: var(--t-scripture); color: var(--fg-primary); } .t-brand { font: 700 24px/1 var(--font-brand); letter-spacing: -0.01em; }