/* ============================================================ Up Review — SMS Campaign 2026 — design tokens & helpers Ported from the client prototype (docs/prototypes/sms-form.html). Loaded on the Filament admin panel via FilamentAsset::register (see app/Providers/AppServiceProvider.php). Components reference these CSS variables through inline styles, exactly like the prototype, for pixel-faithful rendering. ============================================================ */ /* Inter — DM Sans is already imported by resources/css/app.css, but the admin panel theme does not pull it in, so we self-declare both here. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); /* Les variables du proto sont désormais des ALIAS des tokens du design system (resources/css/design-system/tokens.css) : le thème sombre (.dark sur ) et la couleur d'accent personnalisée par équipe s'appliquent donc sans toucher au markup, qui continue de lire var(--color-*) en style inline. Les valeurs de repli sont les hex d'origine du proto : sur un panel qui ne charge pas tokens.css, le rendu reste exactement celui d'avant. En thème clair avec l'accent par défaut, les tokens valent les mêmes hex → aucun changement visuel. */ :root { /* ---------- BRAND ---------- */ --color-violet-dark: var(--ds-brand-hover, #593BC3); --color-violet: var(--ds-brand, #7A56FC); --color-violet-mid: var(--ds-brand-soft, #E8E2FF); --color-violet-light:var(--ds-brand-subtle, #F6F4FF); /* Texte/icône en accent : clarté bornée par le thème (lisible sur les deux fonds), là où --color-violet est l'aplat. */ --color-violet-ink: var(--ds-brand-ink, #7A56FC); /* Texte posé SUR un aplat d'accent : bascule en foncé si l'accent est clair. */ --color-on-violet: var(--ds-on-brand, #FFFFFF); /* ---------- NEUTRALS ---------- */ --color-white: var(--ds-surface, #FFFFFF); --color-border: var(--ds-border, #E5E5E5); --color-bg-grey: var(--ds-surface-hover, #F9FAFB); --color-grey: var(--ds-text-muted, #8E97A5); --color-grey-dark:var(--ds-text-subtle, #6A7079); --color-dark: var(--ds-text, #161C2D); /* ---------- SEMANTIC ---------- */ --color-blue: var(--ds-blue, #3E75ED); --color-blue-light: var(--ds-blue-soft, #EFF6FF); --color-error: var(--ds-error, #DB1212); --color-error-light: var(--ds-error-soft, #FEF2F2); --color-success: var(--ds-success, #10B884); --color-success-light: var(--ds-success-soft, #F5FEFA); --color-warning: var(--ds-warning, #EC5B13); --color-warning-light: var(--ds-warning-soft, #FFF7ED); --color-caution: var(--ds-caution, #FEAD00); --color-caution-light: var(--ds-caution-soft, #FFF6E3); /* ---------- GRADIENTS ---------- */ --gradient-primary: var(--ds-gradient-primary, linear-gradient(135deg, #9E86FF 0%, #5418FF 100%)); --gradient-ia: var(--ds-gradient-ia, linear-gradient(90deg, #3E75ED 0%, #7A56FC 40%, #FF952C 70%, #FFD52C 100%)); /* ---------- TYPE ---------- */ --font-dm-sans: var(--ds-font-display, 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif); --font-inter: var(--ds-font-body, 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif); /* ---------- SHADOWS ---------- */ --shadow-field: var(--ds-shadow-field, 0 4px 10px 0 rgba(0, 0, 0, 0.03), 0 0 0 1px #F0F0F0); --shadow-dropdown: var(--ds-shadow-dropdown, 0 4px 10px 0 rgba(0, 0, 0, 0.07), 0 0 0 1px #F0F0F0); } /* ============================================================ SEMANTIC TYPE ROLES ============================================================ */ .ur-h1 { font-family: var(--font-dm-sans); font-weight: 700; letter-spacing: -0.01em; color: var(--color-dark); line-height: 1.2; } .ur-h3 { font-family: var(--font-inter); font-size: 16px; font-weight: 600; color: var(--color-dark); line-height: 1.3; } /* ============================================================ ANIMATIONS / HELPERS ============================================================ */ @keyframes ur-spin { to { transform: rotate(360deg); } } .ur-spin { animation: ur-spin .7s linear infinite; } @keyframes ur-pulse { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } } .ur-pulse { animation: ur-pulse 1.8s ease-out infinite; } .ur-pulse2 { animation: ur-pulse 1.8s ease-out .6s infinite; } @keyframes ur-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .ur-shimmer { animation: ur-shimmer 1.1s linear infinite; } .ur-card { transition: box-shadow .2s ease, border-color .2s ease; } /* Disabled buttons: reactive visual state when Alpine/Livewire toggles the native [disabled] attribute. !important overrides the inline opacity:1 / box-shadow baked in at server render by x-2026.button. */ .ur-btn:disabled, .ur-btn[disabled] { opacity: .45 !important; cursor: not-allowed !important; box-shadow: none !important; } .ur-scroll::-webkit-scrollbar { height: 8px; width: 8px; } .ur-scroll::-webkit-scrollbar-thumb { background: var(--ds-border-hover, #D6D8E0); border-radius: 99px; } .ur-scroll::-webkit-scrollbar-track { background: transparent; } /* Scope wrapper: everything inside the SMS 2026 form uses Inter + page bg */ .ur-2026 { font-family: var(--font-inter); color: var(--color-dark); } .ur-2026 input::placeholder, .ur-2026 textarea::placeholder { color: var(--ds-placeholder, #B6BAC4); } .ur-2026 ::selection { background: var(--color-violet-mid); } .ur-2026 [x-cloak] { display: none !important; }