/* Land Edge — shared theme layer (Spec 0018). ONE canonical token vocabulary (--c-*) every screen maps onto, so a single skin (and light/dark) themes the whole app. Skins are platform-owned; their values live here, never in the database (the DB stores only a name). Texture: a light drop shadow PLUS a faint inset white top-highlight — the highlight is what reads as crisp, lit-from-above depth. Both baked into the shadow tokens, so any surface using them gets the texture for free. Modes switch via data-theme on ; font steps via data-font. */ :root, [data-theme="light"] { /* surfaces — warm neutral page, white panels */ --c-page: #f7f7f5; --c-panel: #ffffff; --c-sunken: #edeff3; --c-border: #e6e8ee; --c-border-strong: #d3d7e0; /* text */ --c-text: #1d242f; --c-text-2: #586273; --c-text-3: #8a93a4; /* accent (interactive) */ --c-accent: #4a6da7; --c-accent-soft: #e9eff7; --c-accent-line: #c4d3ea; /* thread — deep navy for primary actions / emphasis */ --c-thread: #23396a; --c-thread-deep: #172a54; --c-thread-soft: #e6eaf4; /* semantic */ --c-success: #3aa06b; --c-success-soft: #e6f4ec; --c-warning: #c98a23; --c-warning-soft: #fbf2e1; --c-danger: #d2544e; --c-danger-soft: #fbecec; --c-danger-line: #f1d4d4; /* brand mark */ --c-brand: #26215c; --c-brand-ink: #cecbf6; /* shape */ --c-radius: 14px; --c-radius-sm: 10px; /* elevation — lighter drop + faint inset highlight */ --c-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(30,46,90,.04), 0 3px 8px rgba(30,46,90,.05); --c-shadow-sm: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(30,46,90,.06); --c-shadow-hover: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px rgba(30,46,90,.07), 0 6px 16px rgba(30,46,90,.07); /* button glows */ --c-glow-accent: inset 0 1px 0 rgba(255,255,255,.26), 0 3px 10px rgba(74,109,167,.30); --c-glow-thread: inset 0 1px 0 rgba(255,255,255,.20), 0 3px 10px rgba(35,57,106,.26); } [data-theme="dark"] { /* surfaces — warm-neutral dark, never pure black */ --c-page: #191b21; --c-panel: #23262e; --c-sunken: #171a20; --c-border: #313640; --c-border-strong: #3d434f; /* text */ --c-text: #e9ebef; --c-text-2: #a7afbc; --c-text-3: #727a87; /* accent — lifted for contrast on dark */ --c-accent: #7aa0d8; --c-accent-soft: #26324c; --c-accent-line: #38527e; /* thread */ --c-thread: #8fa6d8; --c-thread-deep: #6f88c0; --c-thread-soft: #26304a; /* semantic */ --c-success: #57c08a; --c-success-soft: #18382b; --c-warning: #d6a24a; --c-warning-soft: #3a2e14; --c-danger: #e0736d; --c-danger-soft: #3a1f1e; --c-danger-line: #5a2f2d; /* brand mark */ --c-brand: #3c3489; --c-brand-ink: #cecbf6; /* shape */ --c-radius: 14px; --c-radius-sm: 10px; /* elevation — lighter, deeper base for dark */ --c-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.28), 0 3px 10px rgba(0,0,0,.30); --c-shadow-sm: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.32); --c-shadow-hover: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.36), 0 6px 16px rgba(0,0,0,.34); /* button glows */ --c-glow-accent: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 12px rgba(0,0,0,.38); --c-glow-thread: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 12px rgba(0,0,0,.38); } /* font-size steps — reserved */ :root { --c-font-scale: 1; } [data-font="small"] { --c-font-scale: .9375; } [data-font="large"] { --c-font-scale: 1.0625; } /* shared hover-lift helper — subtle rise + thin darker border on hover */ .le-lift { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; border: 1px solid transparent; } .le-lift:hover { transform: translateY(-1px); box-shadow: var(--c-shadow-hover); border-color: var(--c-text-3); }