/* ============================================================ Weddy Design System โ€” Tokens Source of truth: docs/design-system.md (Version 1 ยท 2026-07-13) Load this BEFORE style.css in every layout. Plain CSS on purpose: the live frontend pipeline is public/frontend/style.css (hand-maintained). If the SCSS pipeline is restored, generate this file from resources/sass/_tokens.scss instead of editing it here. ============================================================ */ /* ============================================================ Lyon Arabic โ€” subset WOFF2 (Arabic + Latin + presentation forms) Source OTFs: A:\Projects\Weddy\Assets and icons\Lyon_Arabic_2\ Regenerate via fonttools if the glyph coverage needs to grow: python -m fontTools.subset ".otf" \ --unicodes="U+0000-00FF,U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+2000-206F" \ --layout-features='*' --flavor=woff2 --output-file=".woff2" ============================================================ */ @font-face { font-family: 'Lyon Arabic Display'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/LyonArabic-DisplayRegular.woff2') format('woff2'); } @font-face { font-family: 'Lyon Arabic Display'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/LyonArabic-DisplayMedium.woff2') format('woff2'); } @font-face { font-family: 'Lyon Arabic Display'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/LyonArabic-DisplayBold.woff2') format('woff2'); } @font-face { font-family: 'Lyon Arabic Text'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/LyonArabic-TextRegular.woff2') format('woff2'); } @font-face { font-family: 'Lyon Arabic Text'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/LyonArabic-TextSemibold.woff2') format('woff2'); } :root { color-scheme: light only; /* --- Brand palette (5 tokens) --- */ --rose: #D4ADA5; --sage: #7D8C87; --champagne: #E6C489; --blush: #F3ECE7; --ink: #2E2321; /* --- Functional (critical/destructive only) --- */ --garnet: #853125; /* --- Tints & shades --- */ --rose-tint: color-mix(in srgb, var(--rose) 40%, #ffffff); --rose-shade: color-mix(in srgb, var(--rose) 55%, var(--ink)); --sage-tint: color-mix(in srgb, var(--sage) 28%, #ffffff); --sage-shade: color-mix(in srgb, var(--sage) 60%, var(--ink)); --champagne-tint: color-mix(in srgb, var(--champagne) 38%, #ffffff); --champagne-shade: color-mix(in srgb, var(--champagne) 55%, var(--ink)); --garnet-tint: color-mix(in srgb, var(--garnet) 25%, #ffffff); --garnet-shade: color-mix(in srgb, var(--garnet) 80%, var(--ink)); /* --- Ink opacities & lines --- */ --ink-soft: color-mix(in srgb, var(--ink) 62%, transparent); --ink-mute: color-mix(in srgb, var(--ink) 40%, transparent); --ink-line: color-mix(in srgb, var(--ink) 10%, transparent); --border: color-mix(in srgb, var(--sage) 22%, transparent); /* --- Semantic surfaces --- */ --surface: var(--blush); --surface-raised: color-mix(in srgb, var(--blush) 22%, #ffffff); /* --- Typography --- */ --serif: "Lyon Arabic Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --serif-text: "Lyon Arabic Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- Spacing (base-4) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* --- Radius --- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* --- Elevation --- */ --shadow-rest: 0 1px 2px rgba(46, 35, 33, 0.04); --shadow-raised: 0 6px 20px -8px rgba(46, 35, 33, 0.14); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--rose) 30%, transparent); /* --- Glass --- */ --glass-blur: 22px; --glass-saturate: 1.45; --glass-surface: color-mix(in srgb, var(--surface-raised) 62%, transparent); --glass-warm: color-mix(in srgb, var(--blush) 70%, transparent); --glass-premium: color-mix(in srgb, var(--champagne-tint) 55%, transparent); --glass-border: color-mix(in srgb, #ffffff 45%, transparent); --glass-highlight: color-mix(in srgb, #ffffff 55%, transparent); --shadow-glass: 0 24px 48px -20px rgba(46, 35, 33, 0.22), 0 8px 16px -12px rgba(46, 35, 33, 0.14); /* --- Motion --- */ --dur: 200ms; --ease: cubic-bezier(0.4, 0.14, 0.3, 1); /* --- Gradients --- */ --gradient-aurora: radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--rose) 62%, transparent), transparent 55%), radial-gradient(circle at 82% 38%, color-mix(in srgb, var(--champagne) 55%, transparent), transparent 55%), radial-gradient(circle at 48% 95%, color-mix(in srgb, var(--sage) 52%, transparent), transparent 58%), var(--blush); --gradient-bloom: linear-gradient(135deg, var(--rose) 0%, color-mix(in srgb, var(--rose) 55%, var(--champagne)) 55%, var(--champagne) 100%); --gradient-whisper: linear-gradient(160deg, color-mix(in srgb, var(--blush) 92%, white) 0%, var(--surface-raised) 100%); --gradient-halo: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--champagne) 55%, transparent) 0%, color-mix(in srgb, var(--rose) 22%, transparent) 40%, transparent 65%), var(--blush); --gradient-veil: linear-gradient(to top, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 40%, transparent) 45%, transparent 85%); --gradient-petal: linear-gradient(135deg, var(--rose) 0%, var(--blush) 100%); --gradient-meadow: linear-gradient(135deg, var(--sage) 0%, color-mix(in srgb, var(--sage) 65%, white) 100%); } /* ============================================================ Glass utilities โ€” earned by elevation (nav, modals, dropdowns, toasts, popovers; never base cards or fields) ============================================================ */ .glass, .glass-warm, .glass-premium { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-highlight); } .glass { background: var(--glass-surface); } .glass-warm { background: var(--glass-warm); } .glass-premium { background: var(--glass-premium); } @supports not (backdrop-filter: blur(1px)) { .glass { background: var(--surface-raised); } .glass-warm { background: var(--blush); } .glass-premium { background: var(--champagne-tint); } }