/* ═══════════════════════════════════════ variables.css — Design Tokens Nubifly ═══════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* ── Base — Clean white canvas ── */ --bg: #ffffff; /* page body */ --bg-warm: #f4f4f4; /* alternate sections */ --surface: #ffffff; /* cards / navbar */ --surface-2: #f4f4f4; /* secondary panels */ --surface-raised: #ffffff; /* modals, popovers */ /* ── Borders ── */ --border: #d0d7de; --border-light: #e6eaef; --border-strong:#b0b8c2; /* ── Text ── */ --text: #1f2328; --text-mid: #333940; --text-dim: #636c76; --text-muted: #9198a1; /* ── Accent — sky blue ── */ --accent: #6078da; --accent-light: #6078da; --accent-soft: #e0f2fe; --accent-glow: rgba(14,165,233,.10); /* ── Green ── */ --green: #1a7f37; --green-soft: #dafbe1; /* ── Shape ── */ --radius: 14px; --radius-sm: 8px; /* ── Typography ── */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* ── Shadows — refined for white canvas ── */ --shadow-sm: 0 1px 4px rgba(31,35,40,.08), 0 1px 2px rgba(31,35,40,.05); --shadow-md: 0 4px 16px rgba(31,35,40,.10), 0 2px 4px rgba(31,35,40,.06); --shadow-lg: 0 10px 40px rgba(31,35,40,.12), 0 4px 10px rgba(31,35,40,.07); /* ── Motion ── */ --ease: .22s cubic-bezier(.4,0,.2,1); --ease-spring: .42s cubic-bezier(.34,1.56,.64,1); } html { scroll-behavior: smooth; overflow-x: clip; color-scheme: light; background: #ffffff; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; color-scheme: light; } /* ═══════════════════════════════════════ Auth / Login — Override tokens Activos cuando ═══════════════════════════════════════ */ body.auth-page { /* Colors aligned with new base */ --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f4f4; --border: #d0d7de; --border-hover: #8c959f; --text: #1f2328; --text-dim: #636c76; --text-muted: #9198a1; --accent: #57606a; --accent-glow: rgba(87,96,106,.08); --green: #1a7f37; --green-glow: rgba(26,127,55,.1); --red: #d1242f; --red-glow: rgba(209,36,47,.08); --amber: #9a6700; /* Typography */ --font-body: 'Outfit', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Shape */ --radius: 10px; --radius-sm: 6px; } /* ═══════════════════════════════════════ home.css — Design Tokens Paleta exclusiva para la vista Home ═══════════════════════════════════════ */ :root { /* ── Grises base ── */ --ink: #0C0C0E; --ink-2: #1A1A1E; --ink-3: #2C2C32; --muted: #8A8A96; --muted-2: #B8B8C2; --white: #FFFFFF; --smoke: #FFFFFF; --smoke-2: #F2F2F4; --smoke-3: #E4E4E8; /* ── Surface layers ── */ --surface-xs: #EFEFF1; --surface-sm: #F4F4F5; --surface-md: #EBEBEC; --upload-bg: #F8F8FA; --nav-border: #F0F0F2; /* ── Semánticos ── */ --danger: #E5484D; --danger-dark: #C93B3F; --danger-bg: #FEF2F2; --danger-tint-xs: rgba(229, 72, 77, .04); --danger-tint: rgba(229, 72, 77, .08); --danger-border-a: rgba(229, 72, 77, .15); --danger-shadow-a: rgba(229, 72, 77, .35); --success: #1E8A4A; --success-bg: #E8F5EE; --warn: #C47B00; --warn-bg: #FEF3DC; --warn-border-a: rgba(196, 123, 0, .18); /* ── Acentos ── */ --blue: #2563EB; --blue-bg: #EEF3FE; --teal: #0D8F6F; --teal-bg: #E5F5F1; --purple: #6B46C1; --purple-bg: #F0EBFF; --orange: #C25300; --orange-bg: #FEF0E6; /* ── Ink con opacidad (overlays, focus rings) ── */ --ink-a07: rgba(12, 12, 14, .07); --ink-a10: rgba(12, 12, 14, .10); --ink-a22: rgba(12, 12, 14, .22); --ink-a45: rgba(12, 12, 14, .45); --ink-a50: rgba(12, 12, 14, .50); /* ── Sombra de botón y toolbar ── */ --shadow-btn: rgba(0, 0, 0, .20); --toolbar-bg: rgba(249, 249, 249, 0.72); --toolbar-border:rgba(200, 200, 200, 0.20); --grad-end: #3a3a42; /* ─ Sombras compartidas ─ */ --sh: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --sh-md: 0 4px 16px rgba(0,0,0,.08); --sh-lg: 0 8px 32px rgba(0,0,0,.12); }