/* theme-light.css — v3 (flat background, green accents, improved contrast) Applies ONLY when . - No gradients on page background. - Allows tasteful gradients on buttons/badges/steps. - Improves text contrast and robot bubble readability. */ :root[data-theme="light"]{ color-scheme: light; --bg: #ffffff; --text: #0d1726; /* darker for body text */ --text-weak: #2b3a4a; --muted: #5b6f66; /* muted paragraphs */ --surface: #ffffff; /* cards/hero/header */ --surface-2: #f6fbf7; /* soft green tint */ --surface-3: #ecf5ef; /* stronger tint */ --border: #dfeae3; --divider: #e9f2ec; --accent: #0a7f3f; /* Saudi green */ --accent-600: #086735; --accent-700: #075b2f; --accent-200: #bfe3cd; --accent-50: #eef7f1; } /* Base background & text */ :root[data-theme="light"] html, :root[data-theme="light"] body{ background-color: var(--bg) !important; color: var(--text) !important; background-image: none !important; /* kill page BG gradients only */ } /* Kill gradients only on large surfaces; keep components free */ :root[data-theme="light"] :is(.hero,.section,.page,.wrap,.card,.glass){ background-image: none !important; } /* Header / Footer */ :root[data-theme="light"] .site-header{ background: var(--surface) !important; color: var(--text) !important; border-bottom: 1px solid var(--divider) !important; box-shadow: none !important; } :root[data-theme="light"] .site-footer, :root[data-theme="light"] footer.site-footer{ background: var(--surface) !important; color: var(--text) !important; border-top: 1px solid var(--divider) !important; box-shadow: none !important; } /* Links */ :root[data-theme="light"] a{ color: var(--accent) !important; } :root[data-theme="light"] a:hover{ color: var(--accent-600) !important; } /* Cards */ :root[data-theme="light"] :is(.card,.glass,.hero .card,.wrap.glass.card){ background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: 0 20px 40px rgba(15,26,43,.06) !important; } /* Types tiles */ :root[data-theme="light"] .eshraf-type{ background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } :root[data-theme="light"] .eshraf-type .icon{ background: var(--surface-3) !important; color: var(--accent) !important; } /* Form elements */ :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea{ background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none !important; } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder{ color: #6d7f76 !important; } :root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus{ outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-50) !important; } /* Buttons — differentiate variants */ :root[data-theme="light"] :is(button,.btn){ color:#fff !important; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-600) 100%) !important; border:1px solid var(--accent-700) !important; box-shadow: 0 2px 8px rgba(10,127,63,.20) !important; } :root[data-theme="light"] :is(button,.btn):hover{ filter: brightness(1.02); } /* Outline / ghost as secondary */ :root[data-theme="light"] :is(.btn-outline,.btn-ghost){ background:#fff !important; color: var(--accent) !important; border:1px solid var(--accent) !important; box-shadow: none !important; } :root[data-theme="light"] :is(.btn-outline,.btn-ghost):hover{ background: linear-gradient(180deg, var(--accent-50) 0%, #ffffff 70%) !important; } /* Tertiary / subtle buttons (if exist) */ :root[data-theme="light"] .btn-subtle{ background: var(--surface-2) !important; color: var(--text) !important; border:1px solid var(--border) !important; } /* Badges / numbered steps */ :root[data-theme="light"] :is(.badge,.step-badge,.counter){ background: linear-gradient(180deg, var(--accent) 0%, var(--accent-600) 100%) !important; color:#fff !important; border: none !important; } /* Robot helper bubble — ensure readable */ :root[data-theme="light"] :is(.helper,.assistant,.bot,.coach,.tip,.bubble){ background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 24px rgba(15,26,43,.08) !important; } :root[data-theme="light"] :is(.helper,.assistant,.bot,.coach,.tip,.bubble) .muted{ color: var(--muted) !important; } /* Muted text utility */ :root[data-theme="light"] .muted{ color: var(--muted) !important; } :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3{ color: var(--text) !important; }