/* ============================================================================= LOTUS DESIGN SYSTEM — CSS (tokens + componentes) Traduzido do design system Lotus (claude.ai/design) para uso em HTML puro. Modo escuro é opt-in: adicione data-theme="dark" ao . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Hanken+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root { /* Primary — Green Teal */ --color-primary:#3c6660; --color-primary-strong:#214b46; --color-primary-medium:#4a7a73; --color-primary-light:#bfebe4; --color-primary-subtle:#eef5f3; --color-primary-hover:#346058; --color-primary-active:#2c524d; /* Accents */ --color-peach:#f3a78c; --color-peach-strong:#e8845f; --color-peach-bg:#ffebe4; --color-amber:#d89a25; --color-amber-strong:#b37d18; --color-amber-bg:#fff3d6; --color-success:#4f8a72; --color-success-strong:#2d6b55; --color-success-bg:#e6f0ee; --color-error:#ba1a1a; --color-error-strong:#93000a; --color-error-bg:#ffdad6; --color-ai:#7c5fbf; --color-ai-strong:#5c3fa0; --color-ai-bg:#f0ebfa; /* Surfaces / text / borders */ --color-surface:#f8f9fa; --color-surface-card:#ffffff; --color-surface-soft:#eef5f3; --color-surface-strong:#e1e8e6; --color-text-strong:#1a2226; --color-text:#2e3a3f; --color-text-body:#4a5259; --color-text-muted:#626c74; --color-text-subtle:#8c9499; --color-text-on-primary:#fff; --color-border:#dce6e3; --color-border-strong:#c5d4d0; --color-border-subtle:#eef5f3; --color-overlay:rgba(26,34,38,.52); /* Type */ --font-display:'DM Serif Display',Georgia,serif; --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --font-mono:'JetBrains Mono',monospace; --text-2xs:.625rem; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.75rem; --text-4xl:2rem; --text-5xl:2.5rem; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --leading-tight:1.2; --leading-snug:1.35; --leading-normal:1.5; --tracking-tight:-.02em; --tracking-wide:.02em; --tracking-caps:.08em; /* Space */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --sidebar-width:240px; --topbar-height:64px; /* Effects */ --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:9999px; --shadow-xs:0 1px 2px rgba(30,50,50,.06); --shadow-sm:0 1px 3px rgba(30,50,50,.08),0 1px 2px rgba(30,50,50,.04); --shadow-md:0 4px 8px rgba(30,50,50,.08),0 2px 4px rgba(30,50,50,.04); --shadow-lg:0 8px 16px rgba(30,50,50,.10),0 4px 6px rgba(30,50,50,.04); --shadow-card:0 2px 8px rgba(30,50,50,.08); --shadow-modal:0 24px 56px rgba(30,50,50,.18),0 8px 16px rgba(30,50,50,.08); --shadow-focus:0 0 0 3px rgba(60,102,96,.28); --ease-standard:cubic-bezier(.2,0,0,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --transition-fast:120ms var(--ease-standard); --transition-base:200ms var(--ease-standard); --z-overlay:300; --z-modal:400; } [data-theme="dark"] { --color-surface:#0e1a18; --color-surface-card:#172823; --color-surface-soft:#1c3330; --color-surface-strong:#243d38; --color-text-strong:#e4f0ee; --color-text:#c2d5d0; --color-text-body:#9fb8b2; --color-text-muted:#7a9690; --color-text-subtle:#587570; --color-border:#2a403c; --color-border-strong:#385450; --color-border-subtle:#1c3330; --color-primary-subtle:#1c3330; --color-primary-light:#2a4e48; --color-success-bg:#172e26; --color-amber-bg:#28200e; --color-peach-bg:#2c1812; --color-error-bg:#280e0e; --color-ai-bg:#1e1630; --color-overlay:rgba(0,0,0,.68); } /* ── Base ── */ *{box-sizing:border-box} .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none} .material-symbols-outlined.filled{font-variation-settings:'FILL' 1,'wght' 400} ::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:3px} /* ── Tipografia utilitária ── */ .ds-display{font-family:var(--font-display);font-weight:400;color:var(--color-text-strong);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)} .ds-eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-muted)} .ds-muted{color:var(--color-text-muted)} /* ── Botões ── */ .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;min-height:44px; font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);line-height:1; border:1.5px solid var(--color-primary);border-radius:var(--radius-md);background:var(--color-primary);color:#fff;cursor:pointer; transition:background var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);white-space:nowrap;text-decoration:none} .ds-btn:hover{background:var(--color-primary-hover)} .ds-btn:active{background:var(--color-primary-active);transform:scale(.98)} .ds-btn:disabled{opacity:.48;cursor:not-allowed} .ds-btn .material-symbols-outlined{font-size:20px} .ds-btn.sm{padding:7px 14px;min-height:36px;font-size:var(--text-sm)} .ds-btn.sm .material-symbols-outlined{font-size:18px} .ds-btn.lg{padding:13px 28px;min-height:52px;font-size:var(--text-lg)} .ds-btn.block{width:100%} .ds-btn.secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)} .ds-btn.secondary:hover{background:var(--color-primary-subtle)} .ds-btn.ghost{background:transparent;color:var(--color-primary);border-color:transparent} .ds-btn.ghost:hover{background:var(--color-primary-subtle)} .ds-btn.subtle{background:var(--color-primary-subtle);color:var(--color-primary);border-color:transparent} .ds-btn.subtle:hover{background:var(--color-primary-light)} .ds-btn.danger{background:var(--color-error);border-color:var(--color-error)} .ds-btn.danger:hover{background:var(--color-error-strong)} .ds-btn.danger-ghost{background:transparent;color:var(--color-error);border-color:transparent} .ds-btn.danger-ghost:hover{background:var(--color-error-bg)} /* ── Cards ── */ .ds-card{background:var(--color-surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden} .ds-card.outlined{box-shadow:none;border:1px solid var(--color-border)} .ds-card.subtle{background:var(--color-surface-soft);box-shadow:none} .ds-card.pad{padding:20px} /* ── Badges / chips ── */ .ds-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-pill); font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap; background:var(--color-surface-strong);color:var(--color-text-body)} .ds-badge.sm{padding:2px 8px;font-size:var(--text-xs)} .ds-badge.primary{background:var(--color-primary-subtle);color:var(--color-primary)} .ds-badge.success{background:var(--color-success-bg);color:var(--color-success-strong)} .ds-badge.warning{background:var(--color-amber-bg);color:var(--color-amber-strong)} .ds-badge.error{background:var(--color-error-bg);color:var(--color-error-strong)} .ds-badge.ai{background:var(--color-ai-bg);color:var(--color-ai)} .ds-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--radius-pill); font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-semibold);line-height:1.4;white-space:nowrap} .ds-chip .material-symbols-outlined{font-size:14px;font-variation-settings:'FILL' 1} .ds-chip.waiting{background:var(--color-amber-bg);color:var(--color-amber-strong)} .ds-chip.confirmed{background:var(--color-success-bg);color:var(--color-success-strong)} .ds-chip.cancelled{background:var(--color-surface-strong);color:var(--color-text-muted)} /* ── Avatar ── */ .ds-avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; color:#fff;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:15px;background:var(--color-primary);user-select:none;position:relative} .ds-avatar.sm{width:32px;height:32px;font-size:12px} .ds-avatar.lg{width:48px;height:48px;font-size:18px} /* ── Inputs ── */ .ds-label{display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-muted);margin:14px 0 6px} .ds-input{width:100%;font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text); background:var(--color-surface-card);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md); padding:10px 12px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)} .ds-input:focus{border-color:var(--color-primary);box-shadow:var(--shadow-focus)} .ds-input::placeholder{color:var(--color-text-subtle)} textarea.ds-input{resize:vertical;min-height:auto} /* ── Modal ── */ .ds-overlay{position:fixed;inset:0;background:var(--color-overlay);display:none;align-items:center;justify-content:center;padding:16px;z-index:var(--z-modal)} .ds-overlay.open{display:flex} .ds-modal{background:var(--color-surface-card);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);animation:lotus-scale-in .2s var(--ease-standard)} /* ── Layout da plataforma (sidebar/topbar) ── */ .ds-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--weight-medium); color:var(--color-text-body);text-decoration:none;cursor:pointer;transition:background var(--transition-fast)} .ds-nav-item:hover{background:var(--color-primary-subtle)} .ds-nav-item.active{background:var(--color-primary-subtle);color:var(--color-primary);font-weight:var(--weight-semibold)} .ds-nav-item .material-symbols-outlined{font-size:22px} @keyframes lotus-spin{to{transform:rotate(360deg)}} @keyframes lotus-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @keyframes lotus-scale-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}} .ds-spin{display:inline-block;width:16px;height:16px;border:2px solid var(--color-primary-light);border-top-color:var(--color-primary);border-radius:50%;animation:lotus-spin .7s linear infinite;vertical-align:-3px}