/* EL NOOR MOBILIER — shared design tokens (teal-green + gold). Both the public site and the admin panel import this file. To switch palettes, change the variables here in one place. */ :root { /* Brand palette */ --color-primary: #1f6f5c; /* teal-green */ --color-primary-dark: #185546; --color-primary-light: #2e8a73; --color-gold: #c8a24b; /* brand accent */ --color-gold-dark: #a9852f; /* Neutrals */ --color-cream: #f7f2ea; /* page background */ --color-sand: #e8dfcf; /* secondary surfaces / borders */ --color-surface: #ffffff; /* cards */ --color-text: #2b2b2b; --color-text-muted: #6b6b6b; --color-danger: #b03a3a; /* Typography */ --font-base: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Spacing / shape */ --radius: 14px; --radius-sm: 8px; --shadow: 0 6px 24px rgba(31, 111, 92, 0.10); --shadow-hover: 0 10px 32px rgba(31, 111, 92, 0.18); --maxw: 1140px; --transition: 0.2s ease; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-base); color: var(--color-text); background: var(--color-cream); line-height: 1.6; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Direction is set on by the language switcher. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: none; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-gold { background: var(--color-gold); color: #2b2b2b; } .btn-gold:hover { background: var(--color-gold-dark); color: #fff; } .btn-danger { background: var(--color-danger); } .btn-danger:hover { background: #8f2c2c; } .spinner { width: 38px; height: 38px; border: 4px solid var(--color-sand); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 40px auto; } @keyframes spin { to { transform: rotate(360deg); } } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }