/* ---------- Google Font ---------- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); /* ========================================================= THEME TOKENS - Core you requested: --brand, --btn-bg, --btn-hover-bg, --btn-hover-text, --surface - Plus minimal necessary helpers: --text, --border, --btn-text, --shadow-soft, --shadow-card ========================================================= */ /* Light theme (default) */ :root{ /* Core theme tokens (Light) */ --brand: #4f46e5; /* Brand color */ --surface: #ffffff; /* Surface color */ --text: #0f172a; /* Primary text on surface */ --border: #e5e7eb; /* Subtle borders / tracks / inactive tiles */ /* Button tokens */ --btn-bg: var(--brand); /* Button Color */ --btn-text: #ffffff; --btn-hover-bg: #4338ca; /* Button Hover Color */ --btn-hover-text: #ffffff; /* Button Hover Text color */ /* Misc helpers */ --shadow-soft: 0 8px 20px rgba(0,0,0,.06); --shadow-card: 0 8px 16px rgba(0,0,0,.05); /* Layout tokens */ --headerHeight: 84px; } /* Dark theme override — set */ :root[data-theme="dark"]{ --brand: #a5b4fc; --surface: #0f172a; --text: #e5e7eb; --border: #263042; --btn-bg: #6366f1; --btn-text: #ffffff; --btn-hover-bg: #818cf8; --btn-hover-text: #0b1220; /* choose #ffffff if you prefer */ --shadow-soft: 0 8px 20px rgba(0,0,0,.35); --shadow-card: 0 8px 16px rgba(0,0,0,.35); } /* Optional: respect system dark unless you explicitly set data-theme */ @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --brand: #a5b4fc; --surface: #0f172a; --text: #e5e7eb; --border: #263042; --btn-bg: #6366f1; --btn-text: #ffffff; --btn-hover-bg: #818cf8; --btn-hover-text: #0b1220; --shadow-soft: 0 8px 20px rgba(0,0,0,.35); --shadow-card: 0 8px 16px rgba(0,0,0,.35); } } /* ========================================================= BASE / NORMALIZE ========================================================= */ *,*::before,*::after{ box-sizing: border-box; } html,body{ margin: 0; font-family:'Poppins', system-ui, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: var(--text); background: var(--surface); } a{ color: var(--brand); text-decoration: none; } a:hover{ opacity:.9; } /* Utility buttons (global) */ .btn{ padding:.6rem 1.2rem; border-radius:6px; text-decoration:none; font-size:.9rem; font-weight:500; background: var(--btn-bg); color: var(--btn-text); border: 1px solid transparent; box-shadow: var(--shadow-soft); transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .btn:hover{ background: var(--btn-hover-bg); color: var(--btn-hover-text); transform: translateY(-2px); } /* Form controls inherit font */ button,input,select,textarea{ font-family:inherit; } /* Floating action button */ .theme-fab{ position:fixed; right:20px; bottom:24px; z-index:9998; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center; background: var(--btn-bg); color: var(--btn-text); box-shadow: var(--shadow-soft); transition: transform .2s ease, background-color .2s ease, color .2s ease; } .theme-fab:hover{ transform: translateY(-2px); background: var(--btn-hover-bg); color: var(--btn-hover-text); } /* Overlay & panel */ .theme-editor-overlay{ position:fixed; inset:0; z-index:9999; background: rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; padding: 1rem; } .theme-editor-overlay.open{ display:flex; } .theme-editor{ width:min(820px, 96vw); max-height:90vh; overflow:auto; background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow-soft); padding: 1rem; } /* Header */ .te-header{ display:flex; align-items:center; gap:1rem; } .te-header h3{ margin:0; font-size:1.25rem; } .te-close{ margin-left:auto; border:none; background:transparent; cursor:pointer; font-size:1.25rem; color: var(--text); } /* Tabs + Apply toggle */ .te-tabs{ display:flex; align-items:center; gap:.5rem; margin: .5rem 0 1rem; } .te-tab{ border:1px solid var(--border); background: var(--surface); color: var(--text); border-radius:8px; padding:.4rem .8rem; cursor:pointer; } .te-tab.active, .te-tab:hover{ background: var(--btn-bg); color: var(--btn-text); border-color: transparent; } .te-spacer{ flex:1; } .te-toggle select{ border:1px solid var(--border); background: var(--surface); color: var(--text); border-radius:6px; padding:.35rem .55rem; } /* Form */ .te-form{ display:flex; flex-direction:column; gap:1rem; } .te-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; } @media (max-width:700px){ .te-grid{ grid-template-columns: repeat(2, 1fr);} } @media (max-width:460px){ .te-grid{ grid-template-columns: 1fr; } } .te-field{ display:flex; flex-direction:column; gap:.35rem; } .te-field span{ font-size:.9rem; opacity:.85; } .te-field input[type="color"]{ width:100%; height:42px; border:1px solid var(--border); border-radius:8px; background: var(--surface); cursor:pointer; } /* Actions */ .te-actions{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .te-right{ display:flex; gap:.5rem; }