/* ================================================================ LUMINA PLANNER OS v3.0 — TOKENS.CSS Sistema de Design: "Papelaria Viva" 5 temas curados | Tipografia editorial | Experiência de papel ================================================================ */ /* ── Google Fonts ─────────────────────────────────────────────── */ /* Google Fonts carregadas de forma assincrona via no para eliminar waterfall render-blocking */ /* ── Tokens Globais (independentes de tema) ───────────────────── */ :root { /* Fontes */ --font-display: 'Playfair Display', Georgia, serif; --font-display-alt: 'Cormorant Garamond', Georgia, serif; --font-display-bold: 'Fraunces', Georgia, serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'Space Mono', 'Courier New', monospace; --font-script: 'Caveat', cursive; /* Escala tipográfica */ --text-xs: 0.70rem; /* 11.2px */ --text-sm: 0.80rem; /* 12.8px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5625rem; /* 25px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.625rem; /* 42px */ /* Espaçamento */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Border radius (Design System Unificado Dimensão 4) */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Elevação Física de Papelaria */ --shadow-subtle: 0 1px 3px rgba(25, 22, 18, 0.05), 0 1px 2px rgba(25, 22, 18, 0.03); --shadow-elevated: 0 14px 34px rgba(25, 22, 18, 0.09), 0 3px 10px rgba(25, 22, 18, 0.04); --shadow-gold: 0 6px 20px rgba(196, 168, 130, 0.25); /* Transições */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout */ --sidebar-w: 220px; --sidebar-w-collapsed: 56px; --topbar-h: 56px; --max-content: 760px; } /* ═══════════════════════════════════════════════════════════════ TEMA 1 — Linho & Creme (Quiet Luxury) "Elegância silenciosa. Tempo desacelerado." ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="linho"] { --bg-base: #FAF8F4; /* Pergaminho morno */ --bg-surface: #F5F0E8; /* Linho natural */ --bg-elevated: #EDE8DF; /* Linho escuro */ --bg-card: #FFFEFB; /* Branco papel */ --bg-overlay: rgba(250, 248, 244, 0.95); --accent: #C4A882; /* Dourado fosco */ --accent-soft: rgba(196, 168, 130, 0.14); --accent-hover: #B09068; --accent-deep: #8C7055; --accent-2: #9B8B77; /* Tom secundário */ --text-primary: #2E2B27; /* Tinta escura quente */ --text-secondary:#5A5550; --text-muted: #8C877F; --text-on-accent:#FFFEFB; --border: rgba(200, 192, 180, 0.6); --border-soft: rgba(200, 192, 180, 0.3); --border-strong: rgba(160, 150, 138, 0.8); --washi-primary: rgba(196, 168, 130, 0.38); /* Fita washi principal */ --washi-secondary:rgba(155, 139, 119, 0.25);/* Fita washi secundária */ --dot-grid: rgba(160, 152, 142, 0.22); /* Grade pontilhada */ --highlight: rgba(196, 168, 130, 0.28); /* Marca-texto */ --sticky-bg: #FEF9E7; /* Nota adesiva */ --sticky-shadow: rgba(180, 160, 130, 0.3); --success: #7A9E7E; --success-soft: rgba(122, 158, 126, 0.12); --warning: #C8943A; --warning-soft: rgba(200, 148, 58, 0.12); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.12); --info: #6B8CAD; --info-soft: rgba(107, 140, 173, 0.12); --shadow-paper: 0 2px 8px rgba(46, 43, 39, 0.07), 0 1px 3px rgba(46, 43, 39, 0.05); --shadow-card: 0 4px 20px rgba(46, 43, 39, 0.09), 0 2px 6px rgba(46, 43, 39, 0.06); --shadow-modal: 0 16px 60px rgba(46, 43, 39, 0.18), 0 6px 20px rgba(46, 43, 39, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.08); --gradient-hero: linear-gradient(135deg, #C4A882 0%, #8C7055 100%); --gradient-surface: linear-gradient(180deg, #FAF8F4 0%, #F5F0E8 100%); --gradient-accent: linear-gradient(135deg, rgba(196,168,130,0.18) 0%, rgba(196,168,130,0) 100%); /* Tipografia deste tema */ --font-display: 'Playfair Display', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 2 — Matcha & Folhagem (Slow Living) "Paz, natureza e intenção. O ritual do chá do dia." ═══════════════════════════════════════════════════════════════ */ [data-theme="matcha"] { --bg-base: #F7F9F5; --bg-surface: #EEF3EB; --bg-elevated: #E3ECE0; --bg-card: #FBFDF9; --bg-overlay: rgba(247, 249, 245, 0.95); --accent: #7A9E7E; --accent-soft: rgba(122, 158, 126, 0.14); --accent-hover: #6B8C6E; --accent-deep: #527858; --accent-2: #9AB09C; --text-primary: #2D3A2E; --text-secondary:#536754; --text-muted: #7D9080; --text-on-accent:#F7F9F5; --border: rgba(170, 190, 168, 0.55); --border-soft: rgba(170, 190, 168, 0.28); --border-strong: rgba(130, 160, 130, 0.75); --washi-primary: rgba(122, 158, 126, 0.35); --washi-secondary:rgba(82, 120, 88, 0.22); --dot-grid: rgba(140, 170, 145, 0.22); --highlight: rgba(122, 158, 126, 0.25); --sticky-bg: #F0F9E8; --sticky-shadow: rgba(80, 120, 80, 0.2); --success: #5A9E60; --success-soft: rgba(90, 158, 96, 0.12); --warning: #BF8C3A; --warning-soft: rgba(191, 140, 58, 0.12); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.12); --info: #6B8CAD; --info-soft: rgba(107, 140, 173, 0.12); --shadow-paper: 0 2px 8px rgba(45, 58, 46, 0.07), 0 1px 3px rgba(45, 58, 46, 0.05); --shadow-card: 0 4px 20px rgba(45, 58, 46, 0.09), 0 2px 6px rgba(45, 58, 46, 0.06); --shadow-modal: 0 16px 60px rgba(45, 58, 46, 0.18), 0 6px 20px rgba(45, 58, 46, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.07); --gradient-hero: linear-gradient(135deg, #7A9E7E 0%, #527858 100%); --gradient-surface: linear-gradient(180deg, #F7F9F5 0%, #EEF3EB 100%); --gradient-accent: linear-gradient(135deg, rgba(122,158,126,0.18) 0%, rgba(122,158,126,0) 100%); --font-display: 'Playfair Display', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 3 — Blush & Mauve (Feminino Sofisticado) "Delicadeza com caráter. Feminilidade sem infantilização." ═══════════════════════════════════════════════════════════════ */ [data-theme="blush"] { --bg-base: #FDF5F3; --bg-surface: #F8EDEA; --bg-elevated: #EED9D4; --bg-card: #FFFBFA; --bg-overlay: rgba(253, 245, 243, 0.95); --accent: #C4878F; --accent-soft: rgba(196, 135, 143, 0.14); --accent-hover: #B07880; --accent-deep: #926068; --accent-2: #D4A8B0; --text-primary: #342728; --text-secondary:#5E4145; --text-muted: #8A6870; --text-on-accent:#FDF5F3; --border: rgba(200, 175, 175, 0.55); --border-soft: rgba(200, 175, 175, 0.28); --border-strong: rgba(165, 130, 130, 0.75); --washi-primary: rgba(196, 135, 143, 0.35); --washi-secondary:rgba(146, 96, 104, 0.22); --dot-grid: rgba(186, 155, 162, 0.22); --highlight: rgba(196, 135, 143, 0.25); --sticky-bg: #FFF0F2; --sticky-shadow: rgba(180, 120, 130, 0.2); --success: #7A9E7E; --success-soft: rgba(122, 158, 126, 0.12); --warning: #C4943A; --warning-soft: rgba(196, 148, 58, 0.12); --danger: #B84060; --danger-soft: rgba(184, 64, 96, 0.12); --info: #7B8CAD; --info-soft: rgba(123, 140, 173, 0.12); --shadow-paper: 0 2px 8px rgba(52, 39, 40, 0.07), 0 1px 3px rgba(52, 39, 40, 0.05); --shadow-card: 0 4px 20px rgba(52, 39, 40, 0.09), 0 2px 6px rgba(52, 39, 40, 0.06); --shadow-modal: 0 16px 60px rgba(52, 39, 40, 0.18), 0 6px 20px rgba(52, 39, 40, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08); --gradient-hero: linear-gradient(135deg, #C4878F 0%, #926068 100%); --gradient-surface: linear-gradient(180deg, #FDF5F3 0%, #F8EDEA 100%); --gradient-accent: linear-gradient(135deg, rgba(196,135,143,0.18) 0%, rgba(196,135,143,0) 100%); /* Tipografia especial: Cormorant para este tema */ --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 4 — Meia-noite (Dark Premium) "Foco profundo. Sofisticação noturna. Silêncio produtivo." ═══════════════════════════════════════════════════════════════ */ [data-theme="midnight"] { --bg-base: #1C1E22; --bg-surface: #252930; --bg-elevated: #2E333C; --bg-card: #20242A; --bg-overlay: rgba(28, 30, 34, 0.96); --accent: #D4B896; --accent-soft: rgba(212, 184, 150, 0.14); --accent-hover: #C4A882; --accent-deep: #A88C6E; --accent-2: #B0A090; --text-primary: #EDE8E0; --text-secondary:#B8B0A5; --text-muted: #7A7570; --text-on-accent:#1C1E22; --border: rgba(70, 78, 90, 0.8); --border-soft: rgba(70, 78, 90, 0.4); --border-strong: rgba(100, 110, 125, 0.9); --washi-primary: rgba(212, 184, 150, 0.25); --washi-secondary:rgba(168, 140, 110, 0.18); --dot-grid: rgba(80, 88, 100, 0.45); --highlight: rgba(212, 184, 150, 0.2); --sticky-bg: #282218; --sticky-shadow: rgba(0, 0, 0, 0.4); --success: #6A9E6A; --success-soft: rgba(106, 158, 106, 0.14); --warning: #C4943A; --warning-soft: rgba(196, 148, 58, 0.14); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.14); --info: #6B8CAD; --info-soft: rgba(107, 140, 173, 0.14); --shadow-paper: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.18); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.22); --shadow-modal: 0 16px 60px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-sticky: 2px 4px 16px rgba(0,0,0,0.45), 0 1px 5px rgba(0,0,0,0.3); --gradient-hero: linear-gradient(135deg, #D4B896 0%, #A88C6E 100%); --gradient-surface: linear-gradient(180deg, #1C1E22 0%, #252930 100%); --gradient-accent: linear-gradient(135deg, rgba(212,184,150,0.18) 0%, rgba(212,184,150,0) 100%); --font-display: 'Playfair Display', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 5 — Terracota & Mel (Earthy & Bold) "Calor autêntico. Criatividade com raiz. Vida saborosa." ═══════════════════════════════════════════════════════════════ */ [data-theme="terracota"] { --bg-base: #FBF5EF; --bg-surface: #F3E8DC; --bg-elevated: #E9D8C8; --bg-card: #FEFAF6; --bg-overlay: rgba(251, 245, 239, 0.95); --accent: #C87D55; --accent-soft: rgba(200, 125, 85, 0.14); --accent-hover: #B56D45; --accent-deep: #945035; --accent-2: #E0A882; --text-primary: #2F2318; --text-secondary:#5C4535; --text-muted: #8C6E5A; --text-on-accent:#FBF5EF; --border: rgba(190, 165, 140, 0.55); --border-soft: rgba(190, 165, 140, 0.28); --border-strong: rgba(155, 125, 100, 0.75); --washi-primary: rgba(200, 125, 85, 0.35); --washi-secondary:rgba(148, 80, 53, 0.22); --dot-grid: rgba(175, 145, 120, 0.22); --highlight: rgba(200, 125, 85, 0.25); --sticky-bg: #FFF8EC; --sticky-shadow: rgba(160, 100, 60, 0.2); --success: #6E9E6E; --success-soft: rgba(110, 158, 110, 0.12); --warning: #C4943A; --warning-soft: rgba(196, 148, 58, 0.12); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.12); --info: #6B8CAD; --info-soft: rgba(107, 140, 173, 0.12); --shadow-paper: 0 2px 8px rgba(47, 35, 24, 0.07), 0 1px 3px rgba(47, 35, 24, 0.05); --shadow-card: 0 4px 20px rgba(47, 35, 24, 0.09), 0 2px 6px rgba(47, 35, 24, 0.06); --shadow-modal: 0 16px 60px rgba(47, 35, 24, 0.18), 0 6px 20px rgba(47, 35, 24, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.09); --gradient-hero: linear-gradient(135deg, #C87D55 0%, #945035 100%); --gradient-surface: linear-gradient(180deg, #FBF5EF 0%, #F3E8DC 100%); --gradient-accent: linear-gradient(135deg, rgba(200,125,85,0.18) 0%, rgba(200,125,85,0) 100%); /* Tipografia especial: Fraunces para este tema */ --font-display: 'Fraunces', 'Playfair Display', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 6 — Lavanda & Névoa (Calm Luxury) "Aura calmante em lavanda suave, ametista empoeirada e papel seda." ═══════════════════════════════════════════════════════════════ */ [data-theme="lavanda"] { --bg-base: #F8F6FA; /* Papel lavanda sutil */ --bg-surface: #F1EDF5; /* Névoa lilás */ --bg-elevated: #E8E2EE; /* Lavanda escuro */ --bg-card: #FDFCFE; /* Branco puro com nuance */ --bg-overlay: rgba(248, 246, 250, 0.95); --accent: #9D8BA7; /* Ametista aveludada */ --accent-soft: rgba(157, 139, 167, 0.15); --accent-hover: #8A7594; --accent-deep: #6E5679; --accent-2: #B5A5BD; --text-primary: #2B2330; /* Berinjela escuro quase preto */ --text-secondary:#584B5F; --text-muted: #877A8E; --text-on-accent:#FDFCFE; --border: rgba(180, 165, 190, 0.55); --border-soft: rgba(180, 165, 190, 0.28); --border-strong: rgba(145, 130, 155, 0.75); --washi-primary: rgba(157, 139, 167, 0.35); --washi-secondary:rgba(110, 86, 121, 0.22); --dot-grid: rgba(157, 139, 167, 0.22); --highlight: rgba(157, 139, 167, 0.25); --sticky-bg: #F7F2FA; --sticky-shadow: rgba(110, 86, 121, 0.2); --success: #6FA479; --success-soft: rgba(111, 164, 121, 0.12); --warning: #BF8C3A; --warning-soft: rgba(191, 140, 58, 0.12); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.12); --info: #7A8EB8; --info-soft: rgba(122, 142, 184, 0.12); --shadow-paper: 0 2px 8px rgba(43, 35, 48, 0.07), 0 1px 3px rgba(43, 35, 48, 0.05); --shadow-card: 0 4px 20px rgba(43, 35, 48, 0.09), 0 2px 6px rgba(43, 35, 48, 0.06); --shadow-modal: 0 16px 60px rgba(43, 35, 48, 0.18), 0 6px 20px rgba(43, 35, 48, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.07); --gradient-hero: linear-gradient(135deg, #9D8BA7 0%, #6E5679 100%); --gradient-surface: linear-gradient(180deg, #F8F6FA 0%, #F1EDF5 100%); --gradient-accent: linear-gradient(135deg, rgba(157,139,167,0.18) 0%, rgba(157,139,167,0) 100%); --font-display: 'Marcellus', 'Playfair Display', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 7 — Azul Imperial & Ouro (Academia Clássica) "Sobriedade britânica em marinho nobre, ouro clássico e marfim." ═══════════════════════════════════════════════════════════════ */ [data-theme="navy"] { --bg-base: #F7F8FA; /* Marfim frio */ --bg-surface: #EDF1F6; /* Névoa ardósia */ --bg-elevated: #E1E8F0; /* Ardósia claro */ --bg-card: #FAFBFD; /* Branco papel */ --bg-overlay: rgba(247, 248, 250, 0.95); --accent: #3D5A80; /* Azul naval profundo */ --accent-soft: rgba(61, 90, 128, 0.14); --accent-hover: #2E4563; --accent-deep: #1F3046; --accent-2: #C4A882; /* Ouro clássico */ --text-primary: #1E2836; /* Tinta marinho escuro */ --text-secondary:#415166; --text-muted: #708198; --text-on-accent:#FAFBFD; --border: rgba(150, 170, 195, 0.55); --border-soft: rgba(150, 170, 195, 0.28); --border-strong: rgba(110, 135, 165, 0.75); --washi-primary: rgba(61, 90, 128, 0.35); --washi-secondary:rgba(196, 168, 130, 0.28); --dot-grid: rgba(150, 170, 195, 0.25); --highlight: rgba(61, 90, 128, 0.22); --sticky-bg: #F2F6FA; --sticky-shadow: rgba(31, 48, 70, 0.2); --success: #5A9E72; --success-soft: rgba(90, 158, 114, 0.12); --warning: #BF8C3A; --warning-soft: rgba(191, 140, 58, 0.12); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.12); --info: #3D5A80; --info-soft: rgba(61, 90, 128, 0.12); --shadow-paper: 0 2px 8px rgba(30, 40, 54, 0.07), 0 1px 3px rgba(30, 40, 54, 0.05); --shadow-card: 0 4px 20px rgba(30, 40, 54, 0.09), 0 2px 6px rgba(30, 40, 54, 0.06); --shadow-modal: 0 16px 60px rgba(30, 40, 54, 0.18), 0 6px 20px rgba(30, 40, 54, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.07); --gradient-hero: linear-gradient(135deg, #3D5A80 0%, #1F3046 100%); --gradient-surface: linear-gradient(180deg, #F7F8FA 0%, #EDF1F6 100%); --gradient-accent: linear-gradient(135deg, rgba(61,90,128,0.18) 0%, rgba(61,90,128,0) 100%); --font-display: 'Cinzel', 'Playfair Display', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 8 — Sálvia & Eucalipto (Botânica Vintage) "Verde sálvia aveludado, textura de papel pólen e frescor natural." ═══════════════════════════════════════════════════════════════ */ [data-theme="sage"] { --bg-base: #F5F7F4; /* Verde pergaminho */ --bg-surface: #EAF0E8; /* Sálvia pálido */ --bg-elevated: #DEE7DC; /* Sálvia escuro */ --bg-card: #FBFCFA; /* Papel vegetal */ --bg-overlay: rgba(245, 247, 244, 0.95); --accent: #829986; /* Sálvia aveludada */ --accent-soft: rgba(130, 153, 134, 0.15); --accent-hover: #6F8773; --accent-deep: #4E6853; --accent-2: #A8BAAB; --text-primary: #253327; /* Floresta escuro */ --text-secondary:#465B49; --text-muted: #768B79; --text-on-accent:#FBFCFA; --border: rgba(165, 185, 168, 0.55); --border-soft: rgba(165, 185, 168, 0.28); --border-strong: rgba(125, 150, 128, 0.75); --washi-primary: rgba(130, 153, 134, 0.35); --washi-secondary:rgba(78, 104, 83, 0.22); --dot-grid: rgba(145, 170, 148, 0.22); --highlight: rgba(130, 153, 134, 0.25); --sticky-bg: #EEF5ED; --sticky-shadow: rgba(78, 104, 83, 0.2); --success: #5A9E60; --success-soft: rgba(90, 158, 96, 0.12); --warning: #BF8C3A; --warning-soft: rgba(191, 140, 58, 0.12); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.12); --info: #6B8CAD; --info-soft: rgba(107, 140, 173, 0.12); --shadow-paper: 0 2px 8px rgba(37, 51, 39, 0.07), 0 1px 3px rgba(37, 51, 39, 0.05); --shadow-card: 0 4px 20px rgba(37, 51, 39, 0.09), 0 2px 6px rgba(37, 51, 39, 0.06); --shadow-modal: 0 16px 60px rgba(37, 51, 39, 0.18), 0 6px 20px rgba(37, 51, 39, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.07); --gradient-hero: linear-gradient(135deg, #829986 0%, #4E6853 100%); --gradient-surface: linear-gradient(180deg, #F5F7F4 0%, #EAF0E8 100%); --gradient-accent: linear-gradient(135deg, rgba(130,153,134,0.18) 0%, rgba(130,153,134,0) 100%); --font-display: 'Shippori Mincho', 'Playfair Display', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 9 — Caramelo & Moleskine (Couro & Café) "Aconchego de cafeteria literária: couro envelhecido e café espresso." ═══════════════════════════════════════════════════════════════ */ [data-theme="caramelo"] { --bg-base: #FBF7F0; /* Papel pólen bold */ --bg-surface: #F4EAD8; /* Kraft suave */ --bg-elevated: #EBDCBE; /* Caramelo claro */ --bg-card: #FFFDF9; /* Papel pergaminho */ --bg-overlay: rgba(251, 247, 240, 0.95); --accent: #B88A58; /* Couro cognac */ --accent-soft: rgba(184, 138, 88, 0.15); --accent-hover: #A27645; --accent-deep: #7C5326; --accent-2: #8A5E35; --text-primary: #382618; /* Café espresso escuro */ --text-secondary:#614631; --text-muted: #8F725A; --text-on-accent:#FFFDF9; --border: rgba(195, 165, 130, 0.55); --border-soft: rgba(195, 165, 130, 0.28); --border-strong: rgba(155, 125, 90, 0.75); --washi-primary: rgba(184, 138, 88, 0.35); --washi-secondary:rgba(124, 83, 38, 0.22); --dot-grid: rgba(175, 145, 110, 0.25); --highlight: rgba(184, 138, 88, 0.25); --sticky-bg: #FCF5E8; --sticky-shadow: rgba(124, 83, 38, 0.2); --success: #6FA479; --success-soft: rgba(111, 164, 121, 0.12); --warning: #BF8C3A; --warning-soft: rgba(191, 140, 58, 0.12); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.12); --info: #6B8CAD; --info-soft: rgba(107, 140, 173, 0.12); --shadow-paper: 0 2px 8px rgba(56, 38, 24, 0.07), 0 1px 3px rgba(56, 38, 24, 0.05); --shadow-card: 0 4px 20px rgba(56, 38, 24, 0.09), 0 2px 6px rgba(56, 38, 24, 0.06); --shadow-modal: 0 16px 60px rgba(56, 38, 24, 0.18), 0 6px 20px rgba(56, 38, 24, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.07); --gradient-hero: linear-gradient(135deg, #B88A58 0%, #7C5326 100%); --gradient-surface: linear-gradient(180deg, #FBF7F0 0%, #F4EAD8 100%); --gradient-accent: linear-gradient(135deg, rgba(184,138,88,0.18) 0%, rgba(184,138,88,0) 100%); --font-display: 'Caveat', 'Fraunces', Georgia, serif; } /* ═══════════════════════════════════════════════════════════════ TEMA 10 — Merlot & Borgonha (Boutique Literária) "Vinho tinto nobre, profundidade dramática e elegância parisiense." ═══════════════════════════════════════════════════════════════ */ [data-theme="merlot"] { --bg-base: #FAF5F6; /* Rosé porcelana */ --bg-surface: #F5EAEB; /* Veludo pálido */ --bg-elevated: #EBD8DA; /* Borgonha suave */ --bg-card: #FCF8F9; /* Papel linho rosé */ --bg-overlay: rgba(250, 245, 246, 0.95); --accent: #9E4E63; /* Vinho Merlot */ --accent-soft: rgba(158, 78, 99, 0.15); --accent-hover: #873E51; --accent-deep: #662736; --accent-2: #BC798B; --text-primary: #331B22; /* Ameixa escuro quase negro */ --text-secondary:#5C3A44; --text-muted: #8C6671; --text-on-accent:#FCF8F9; --border: rgba(190, 155, 165, 0.55); --border-soft: rgba(190, 155, 165, 0.28); --border-strong: rgba(150, 110, 120, 0.75); --washi-primary: rgba(158, 78, 99, 0.35); --washi-secondary:rgba(102, 39, 54, 0.22); --dot-grid: rgba(175, 140, 150, 0.22); --highlight: rgba(158, 78, 99, 0.25); --sticky-bg: #F9EEF1; --sticky-shadow: rgba(102, 39, 54, 0.2); --success: #6FA479; --success-soft: rgba(111, 164, 121, 0.12); --warning: #BF8C3A; --warning-soft: rgba(191, 140, 58, 0.12); --danger: #B85C5C; --danger-soft: rgba(184, 92, 92, 0.12); --info: #6B8CAD; --info-soft: rgba(107, 140, 173, 0.12); --shadow-paper: 0 2px 8px rgba(51, 27, 34, 0.07), 0 1px 3px rgba(51, 27, 34, 0.05); --shadow-card: 0 4px 20px rgba(51, 27, 34, 0.09), 0 2px 6px rgba(51, 27, 34, 0.06); --shadow-modal: 0 16px 60px rgba(51, 27, 34, 0.18), 0 6px 20px rgba(51, 27, 34, 0.12); --shadow-sticky: 2px 4px 14px rgba(0,0,0,0.11), 0 1px 4px rgba(0,0,0,0.07); --gradient-hero: linear-gradient(135deg, #9E4E63 0%, #662736 100%); --gradient-surface: linear-gradient(180deg, #FAF5F6 0%, #F5EAEB 100%); --gradient-accent: linear-gradient(135deg, rgba(158,78,99,0.18) 0%, rgba(158,78,99,0) 100%); --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; } /* ── Perfis — identidade sem alterar o visual base ────────────── */ [data-profile="estudiosa"] { --profile-emoji: "🎓"; } [data-profile="realizadora"] { --profile-emoji: "💼"; } [data-profile="equilibrada"] { --profile-emoji: "🌿"; } [data-profile="multitarefa"] { --profile-emoji: "🏡"; } [data-profile="criativa"] { --profile-emoji: "✨"; } [data-profile="personalizado"] { --profile-emoji: "⚡"; } /* ═══════════════════════════════════════════════════════════════ SISTEMA DE TIPOGRAFIA PERSONALIZÁVEL (10 ESTILOS DE ESCRITA) Sobrescreve a fonte padrão e aplica em TODA a aplicação ═══════════════════════════════════════════════════════════════ */ /* 1. Editorial Parisiense */ html[data-font="editorial"] { --font-display: 'Playfair Display', Georgia, serif !important; --font-body: 'Lora', 'Playfair Display', Georgia, serif !important; } /* 2. Minimalista Suíço */ html[data-font="moderna"] { --font-display: 'Plus Jakarta Sans', system-ui, sans-serif !important; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif !important; } /* 3. Manual Tático / Máquina */ html[data-font="tatica"] { --font-display: 'Space Mono', 'Courier New', monospace !important; --font-body: 'Space Mono', 'Courier New', monospace !important; --font-mono: 'Space Mono', 'Courier New', monospace !important; } /* 4. Noir Literário */ html[data-font="literaria"] { --font-display: 'Cormorant Garamond', Georgia, serif !important; --font-body: 'Cormorant Garamond', 'Georgia', serif !important; } /* 5. Caderno Autoral */ html[data-font="manuscrita"] { --font-display: 'Caveat', cursive !important; --font-body: 'Caveat', cursive !important; --font-script: 'Caveat', cursive !important; } /* 6. Retrô & Presença */ html[data-font="bold_serif"] { --font-display: 'Fraunces', Georgia, serif !important; --font-body: 'Fraunces', Georgia, serif !important; } /* 7. Gazeta & Crônica */ html[data-font="chronicle"] { --font-display: 'Cinzel', 'Times New Roman', Georgia, serif !important; --font-body: 'Merriweather', 'Times New Roman', serif !important; } /* 8. Bauhaus & Arquitetura */ html[data-font="bauhaus"] { --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif !important; --font-body: 'Outfit', 'Plus Jakarta Sans', sans-serif !important; } /* 9. Boutique Poética */ html[data-font="poetica"] { --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif !important; --font-body: 'Newsreader', Georgia, serif !important; } /* 10. Japandi & Harmonia */ html[data-font="zen"] { --font-display: 'Shippori Mincho', 'Playfair Display', Georgia, serif !important; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif !important; } /* ═══════════════════════════════════════════════════════════════ CASCATA TIPOGRÁFICA GLOBAL (APLICA EM TODA A PÁGINA) Garante que a escolha tipográfica transforme a experiência completa ═══════════════════════════════════════════════════════════════ */ body, .app-layout, .page-area, .card, .card-inset, .planner-block, .habit-item, .habit-name, .todo-text, .sticky-note-field, .sticky-note-label, .nav-tab, .nav-label, .btn, .btn-sm, .btn-lg, .badge, .time-slot-input, .time-slot-label, .section-label, .date-hero .weekday, .date-hero .month-year, p, li, label, input, textarea, select { font-family: var(--font-body); } h1, h2, h3, h4, .heading-display, .heading-display-italic, .heading-1, .heading-2, .topbar-title, .modal-title, .section-title, .sidebar-logo, .date-hero .day-num, .week-day-num, .lumina-brand-name { font-family: var(--font-display); } /* Ajuste de escala para estilo Manuscrita / Caveat */ html[data-font="manuscrita"] body { font-size: 1.05rem; } html[data-font="manuscrita"] input, html[data-font="manuscrita"] textarea, html[data-font="manuscrita"] .todo-text, html[data-font="manuscrita"] .sticky-note-field { font-size: 1.18rem !important; line-height: 1.4 !important; } /* Ajuste de tracking para estilo Manual Tático */ html[data-font="tatica"] body, html[data-font="tatica"] input, html[data-font="tatica"] textarea, html[data-font="tatica"] select, html[data-font="tatica"] button { letter-spacing: -0.015em; font-feature-settings: "tnum" 1; } /* ── Brand Logo Lockup (SVG Emblem + Tipografia) ───────────────── */ .lumina-brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; user-select: none; } .lumina-brand-crest { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); transition: transform 0.2s ease; } .lumina-brand-lockup:hover .lumina-brand-crest { transform: scale(1.04) rotate(-2deg); } .lumina-brand-text { display: flex; flex-direction: column; line-height: 1.05; } .lumina-brand-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--text-primary); letter-spacing: 0.03em; display: flex; align-items: center; gap: 6px; } .lumina-brand-sub { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin-top: 2px; } /* ============================================================ REGRAS EDITORIAIS DE IMPRESSÃO (FIDELIDADE TIPOGRÁFICA 100%) ============================================================ */ @media print { html, body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Garante fidelidade das fontes selecionadas durante impressão nativa */ .lumina-print-sheet-root { font-family: var(--font-body) !important; } .lumina-print-sheet-root h1, .lumina-print-sheet-root h2, .lumina-print-sheet-root h3, .lumina-print-sheet-root .serif, .lumina-print-sheet-root .print-title, .lumina-print-sheet-root .vp-title, .lumina-print-sheet-root .vp-h2 { font-family: var(--font-display) !important; } /* Caso especial: Manuscrita aplica Caveat em tudo */ html[data-font="manuscrita"] .lumina-print-sheet-root, html[data-font="manuscrita"] .lumina-print-sheet-root * { font-family: 'Caveat', cursive !important; } /* Caso especial: Tática aplica Space Mono em tudo */ html[data-font="tatica"] .lumina-print-sheet-root, html[data-font="tatica"] .lumina-print-sheet-root * { font-family: 'Space Mono', 'Courier New', monospace !important; } }